同じクラスのdivを切り替えます

Question

「clickme」をクリックすると、次の.info divを切り替えるソリューションを探しています。私はnext()などで多くのことを試みましたが、何も動作しません。あなたはそれを達成するためにclosest()とnext()を使用することができます

$(document).ready(function(){ 
 
    $(function(){ 
 
    $(".clickme").click(function(){ 
 
     $(".info").slideToggle(); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mbox"> 
 
    <div class="mbox-inner"> 
 
    <div class="mbox-left"><span class="mstep">1.1</span>Great</div> 
 
    <div class="mbox-right"> 
 
     <select class="ignore" id="modul1_1"> 
 
     <option value="0">a</option> 
 
     <option value="1">b</option> 
 
     </select> 
 
     <div class="clickme">Click</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="info">Lorem ipsum dolor sit amet, consetetur sadipscing</div> 
 

 
<div class="mbox"> 
 
    <div class="mbox-inner"> 
 
    <div class="mbox-left"><span class="mstep">1.2</span>Greater</div> 
 
    <div class="mbox-right"> 
 
     <select class="ignore" id="modul1_2"> 
 
     <option value="0">a</option> 
 
     <option value="1">b</option> 
 
     </select> 
 
     <div class="clickme">Click</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="info">Lorem ipsum dolor sit amet, consetetur s</div>

Answer 1

：

$(function(){ 
    $(".clickme").click(function(){ 
     $(this).closest('.mbox').next(".info").slideToggle(); 
    }); 
}); 

$(this)がクリックされた要素を参照して.closest('.mbox')クラスmboxを持つ親を取得しますクレケのd項目の場合、.next(".info")はクラスinfoの次の要素を選択します。

注： 2つのレディ機能を使用する必要はありません。

これが役に立ちます。だから、

$(function(){ 
 
    $("<div><a class=\"close\" href=\"#\">Hinweis schliessen</a></div>").appendTo(".info"); 
 
    
 
    $(".clickme").click(function(){ 
 
    $(this).closest('.mbox').next(".info").slideToggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mbox"> 
 
    <div class="mbox-inner"> 
 
    <div class="mbox-left"><span class="mstep">1.1</span>Great</div> 
 
    <div class="mbox-right"> 
 
     <select class="ignore" id="modul1_1"> 
 
     <option value="0">a</option> 
 
     <option value="1">b</option> 
 
     </select> 
 
     <div class="clickme">Click</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="info">Lorem ipsum dolor sit amet, consetetur sadipscing</div> 
 

 
<div class="mbox"> 
 
    <div class="mbox-inner"> 
 
    <div class="mbox-left"><span class="mstep">1.2</span>Greater</div> 
 
    <div class="mbox-right"> 
 
     <select class="ignore" id="modul1_2"> 
 
     <option value="0">a</option> 
 
     <option value="1">b</option> 
 
     </select> 
 
     <div class="clickme">Click</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="info">Lorem ipsum dolor sit amet, consetetur s</div>