jQueryを使用してsetTimeout（）でメッセージを表示する方法は？

Question

タイトルが実際にどういうのだろうか。しかし、本質的に、私はまだ決定されたsetTimeout()で特定のメッセージを表示しようとしています。しかし問題は1つでclass="para"をクリックするとメッセージがすべて表示されることです。この問題を解決するには？ 、私は.closest()と.parents()を使用してみましたが、無駄に

$(function() { 
 
\t $('.foo').each(function() { 
 
\t \t $(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>'); 
 
\t }); 
 
\t $('.para').each(function() { 
 
\t \t $(this).dblclick(function() { 
 
\t \t \t 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 
 
\t \t \t }, 0); 
 
\t \t \t 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 
 
\t \t \t }, 1000); 
 
\t \t }); 
 
\t }); 
 
});

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