Dyana Putry Dyana Putry - 3 months ago 13
CSS Question

How to display a message with setTimeout() using jquery?

I wonder what the title should really. But in essence, I'm still trying to display specific message with

setTimeout()
that have been determined. But the problem is if in one
class="para"
is clicked the message appears all. How to solve this problem? I tried using
.closest()
and
.parents()
but to no avail



$(function () {
$('.foo').each(function () {
$(this).wrapInner('<p class="para"/>').prepend('<span class="bar" style="color:red;position:absolute;top:5px;right:5px;opacity:0;transition:opacity 0.3s">Show hide</span>');
});
$('.para').each(function () {
$(this).dblclick(function () {
setTimeout(function () {
$('.bar').css('opacity', 1);
//$(this).closest('.foo').find('.bar').css('opacity', 1); not working
//$(this).parents('.foo').find('.bar').css('opacity', 1); not working
}, 0);
setTimeout(function () {
$('.bar').css('opacity', 0);
//$(this).closest('.foo').find('.bar').css('opacity', 0); not working
//$(this).parents('.foo').find('.bar').css('opacity', 0); not working
}, 1000);
});
});
});

.foo {
position: relative;
border: 1px solid orange;
margin: 1em;
padding: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='foo'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc non est positum in nostra actione. Idemne potest esse dies saepius, qui semel fuit? Quae qui non vident, nihil umquam magnum ac cognitione dignum amaverunt.</div>
<div class='foo'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc non est positum in nostra actione. Idemne potest esse dies saepius, qui semel fuit? Quae qui non vident, nihil umquam magnum ac cognitione dignum amaverunt.</div>
<div class='foo'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc non est positum in nostra actione. Idemne potest esse dies saepius, qui semel fuit? Quae qui non vident, nihil umquam magnum ac cognitione dignum amaverunt.</div>




Answer

$(function () {

  $('.foo').each(function () {
    $(this).wrapInner('<p class="para"/>').prepend('<span class="bar">Show hide</span>');
  });
  
  $('.para').each(function () {
    $(this).dblclick(function () {
      var $that = $(this);          // store the $(this), because...
      setTimeout(function () {
        // console.log(this);       // ...inside setTimeout `this` is Window!!!
        $that.closest('.foo').find('.bar').css('opacity', 1); // working
      }, 0);
      
      setTimeout(function () {
        $that.closest('.foo').find('.bar').css('opacity', 0); // working
      }, 1000);
    });
  });
  
});
.foo {
  position: relative;
  border: 1px solid orange;
  margin: 1em;
  padding: 1em;
}
.para{
  background:gold;
}
.bar{color:red;position:absolute;top:5px;right:5px;opacity:0;transition:opacity 0.3s}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='foo'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc non est positum in nostra actione. Idemne potest esse dies saepius, qui semel fuit? Quae qui non vident, nihil umquam magnum ac cognitione dignum amaverunt.</div>
<div class='foo'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc non est positum in nostra actione. Idemne potest esse dies saepius, qui semel fuit? Quae qui non vident, nihil umquam magnum ac cognitione dignum amaverunt.</div>
<div class='foo'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc non est positum in nostra actione. Idemne potest esse dies saepius, qui semel fuit? Quae qui non vident, nihil umquam magnum ac cognitione dignum amaverunt.</div>