單個函數在其他div中單獨切換多個div

Question

我的頁面中有一些div，每個div都有我想要通過jQuery切換的內容。 這實際上是我的代碼看起來像：

$('.my_div').click(function() { 
    $(".my_div_B").slideToggle("slow"); 
}); 

$('.my_div2').click(function() { 
    $(".my_div_B2").slideToggle("slow"); 
}); 

$('.my_div3').click(function() { 
    $(".my_div_B3").slideToggle("slow"); 
}); 

等等......當然，這不是做的最好的方法，在相同的代碼部分總是重複的div的名稱。

HTML模式：

<div class="my_div"> 
<img /> 
<img /> 
<div class="my_div_B">text</div> 
</div> 

我怎樣才能讓它在不打開我所有的div點擊$（ '本'）更短？ - ps。我知道還有一些類似的問題，但答案似乎是針對該標記的。

Answer 1

您可以檢查是否div有特定的類值，如：

//select div with class attribute starts with my_div 
 
$('div[class^="my_div"]').click(function() { 
 
    //find child element div with class start my_div_B 
 
    $(this).children("div[class^='my_div_B']").slideToggle("slow"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="my_div"> 
 
    <img src='http://placehold.it/200x100' /> 
 
    <img src='http://placehold.it/200x100' /> 
 
    <div class="my_div_B">text</div> 
 
</div> 
 
<div class="my_div2"> 
 
    <img src='http://placehold.it/200x100' /> 
 
    <img src='http://placehold.it/200x100' /> 
 
    <div class="my_div_B2">text</div> 
 
</div>