クリックすると、同じクラスのどの要素の検出と表示さdivの

Question

$(document).on("click", ".add_comment", function() { \t \t 
 
\t $('.text_area').show(); \t \t 
 
});

.main_text 
 
{ 
 
    width:260px; 
 
    height:75px; 
 
    background-color:#fff; 
 
    border:1px solid #000; 
 
    overflow:hidden; 
 
} 
 
.add_comment 
 
{ 
 
    color:#05c; 
 
    cursor:pointer; 
 
} 
 
.text_area 
 
{ 
 
    position:relative; 
 
    left:300px; 
 
    top:-120px; 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class="main_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus  et magnis dis parturient montes, nascetur ridiculus mus. 
 
    </div> 
 
    <p class="add_comment">Add comment</p> 
 
    <div class="text_area"> 
 
    <textarea placeholder="Add comment"></textarea> 
 
    </div> 
 
    <div class="main_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus  et magnis dis parturient montes, nascetur ridiculus mus. 
 
    </div> 
 
    <p class="add_comment">Add comment</p> 
 
    <div class="text_area"> 
 
    <textarea placeholder="Add comment"></textarea> 
 
    </div> 
 
    <div class="main_text">Lorem ipsum dolor sit amet, consectetuer adipiscing   elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque   penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
 
    </div> 
 
    <p class="add_comment">Add comment</p> 
 
    <div class="text_area"> 
 
    <textarea placeholder="Add comment"></textarea> 
 
    </div> 
 
</div>

こんにちは、 私は希望のAdd commentテキスト内をクリックしてclass="text_area"を示したが、今私はAdd commentでクリックすると、すべてのテキストエリアを示すが、Iクリックされたものを検出したい

2番目をクリックするとAdd comment第2のテキストエリアが表示されます

Answer 1

次のようにjQuery next()メソッドを使用できます。

$(document).on("click", ".add_comment", function() { \t \t 
 
\t $(this).next('.text_area').show(); \t \t 
 
});

.main_text 
 
{ 
 
    width:260px; 
 
    height:75px; 
 
    background-color:#fff; 
 
    border:1px solid #000; 
 
    overflow:hidden; 
 
} 
 
.add_comment 
 
{ 
 
    color:#05c; 
 
    cursor:pointer; 
 
} 
 
.text_area 
 
{ 
 
    position:relative; 
 
    left:300px; 
 
    top:-120px; 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class="main_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus  et magnis dis parturient montes, nascetur ridiculus mus. 
 
    </div> 
 
    <p class="add_comment">Add comment</p> 
 
    <div class="text_area"> 
 
    <textarea placeholder="Add comment"></textarea> 
 
    </div> 
 
    <div class="main_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus  et magnis dis parturient montes, nascetur ridiculus mus. 
 
    </div> 
 
    <p class="add_comment">Add comment</p> 
 
    <div class="text_area"> 
 
    <textarea placeholder="Add comment"></textarea> 
 
    </div> 
 
    <div class="main_text">Lorem ipsum dolor sit amet, consectetuer adipiscing   elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque   penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
 
    </div> 
 
    <p class="add_comment">Add comment</p> 
 
    <div class="text_area"> 
 
    <textarea placeholder="Add comment"></textarea> 
 
    </div> 
 
</div>

Answer 2

それはとてもnext()セレクタを使用して次の兄弟です。

$(document).on("click", ".add_comment", function() {   
    $(this).next('.text_area').show();  
}); 

Answer 3

あなたはラッパーであなたの要素をラップし、ラッパーに特定のクリックハンドラを持つ試すことができます。

ラッパーの例：

<div class='wrapper'> 
    <div class="main_text">Lorem ipsum dolor sit amet, consectetuer adipiscing   elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque   penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div> 
    <p class="add_comment">Add comment</p> 
    <div class="text_area"> 
     <textarea placeholder="Add comment"></textarea> 
    </div> 
    </div> 
</div> 

更新クリック：

$(document).on("click", ".add_comment", function() {   
    $(this).closest('.wrapper').find('.text_area').show();  
}); 

jsfiddle：https://jsfiddle.net/gyutjb53/

Answer 4

確かに、ラップの要素。構造的に言えば、各コンテンツブロックは離散的であり、離散的に操作できる必要があります。それは全体的な "ブラックボックス"アプローチです。ブロックに構造化されたものはすべてブロックに含まれています。

// When the el with the class add_comment is clicked, 
 
$(".add_comment").on("click", function(){ 
 
    // Hide ALL elements with the class text_area, 
 
    $(".text_area").hide(); 
 
    // Then just show the one that applies to this click. 
 
    $(this).parent().children(".text_area").show(); 
 
})

.main_text { 
 
    width: 260px; 
 
    height: 75px; 
 
    background-color: #fff; 
 
    border: 1px solid #000; 
 
    overflow: hidden; 
 
} 
 
.add_comment { 
 
    color: #05c; 
 
    cursor: pointer; 
 
} 
 
.text_area { 
 
    position: relative; 
 
    left: 300px; 
 
    top: -120px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <section class="content-item"> 
 
    <div class="main_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
 
    </div> 
 
    <p class="add_comment">Add comment</p> 
 
    <div class="text_area"> 
 
     <textarea placeholder="Add comment"></textarea> 
 
    </div> 
 
    </section> 
 
    <section class="content-item"> 
 
    <div class="main_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
 
    </div> 
 
    <p class="add_comment">Add comment</p> 
 
    <div class="text_area"> 
 
     <textarea placeholder="Add comment"></textarea> 
 
    </div> 
 
    </section> 
 
    <section class="content-item"> 
 
    <div class="main_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
 
    </div> 
 
    <p class="add_comment">Add comment</p> 
 
    <div class="text_area"> 
 
     <textarea placeholder="Add comment"></textarea> 
 
    </div> 
 
    </section> 
 
</div>