Одиночная функция для переключения нескольких divs внутри других divs отдельно

Question

У меня есть 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"); 
}); 

и так далее ... Конечно, это не самый лучший способ сделать это, повторяя имя дивы всегда в одной и той же части кода.

HTML шаблон:

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

Как я могу сделать его короче, не открывая все мои дивы нажав на $ ('это')? - пс. Я знаю, что есть некоторые подобные вопросы, но ответы, похоже, специфичны для этой разметки.

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>