jQuery를 사용하여 setTimeout()을 사용하여 메시지를 표시하는 방법은 무엇입니까?

Question

제목이 정말로 무엇인지 궁금합니다. 그러나 본질적으로, 나는 아직 결정된 특정 메시지를 setTimeout()과 함께 표시하려고합니다. 그러나 하나의 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>