Question

我想知道标题应该是什么。但实质上，我仍然试图显示已经确定的setTimeout()的特定消息。但问题是，如果单击一个class="para"，则消息全部显示。如何解决这个问题呢？我尝试使用.closest()和.parents()，但无济于事

＆＃13;

$(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);
		});
	});
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

$(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>

如何使用jquery使用setTimeout（）显示消息？

1 个答案: