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点击$（＆＃39; this＆＃39;），我怎样才能缩短它？ - 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>

单个功能可以单独切换其他div中的多个div

1 个答案: