javascript - 单个函数可单独切换其他 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 单击 $('this') 的情况下使其更短？ - 附言我知道有一些类似的问题，但答案似乎是针对该标记的。

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>