Multiple Functions Into One

Refresh

November 2018

Views

113 time

2

I am trying to take these functions and combine them into one.

            $(".a h3").click(function() {
               $(".a .collapse-this").slideToggle("slow");
            });

            $(".b h3").click(function() {
               $(".b .collapse-this").slideToggle("slow");
            });

            $(".c h3").click(function() {
               $(".c .collapse-this").slideToggle("slow");
            });

Something like this, but this causes everything to collapse, would like it to open one at a time.

           $(".repeatingClass h3").click(function() {
              $(".collapse-this").slideToggle("slow");
           });

I have searched for a solution and came across using "$(this)" but I am a little stuck. So hopefully someone can help.

6 answers

-2

если HTML настроен таким образом , чтобы вы могли получить родительский элемент с JQuery.

$(".SharedClassName").click(function(){
    $(this).parent(".collapse-this").slideToggle("slow");
}
1

Я возьму трещину в этом:

$(".repeatingClass h3").click(function(e){
    $(this).closest(".repeatingClass").find('.collapse-this').slideToggle("slow");
});

closestВызова находит ближайший родительский элемент, удовлетворяющий селектор, в этом случае .repeatingClass

0

Мне нравится, используя DATA- атрибуты для хранения ссылок на другие HTML страницы. Таким образом, я создал HTML, как:

<h3 data-panel-id="panel1">blah blah</h3>
<h3 data-panel-id="panel2">blah blah</h3>
<h3 data-panel-id="panel3">blah blah</h3> 

Тогда вы можете написать это в качестве JQuery:

$('h3').click(function(){
    var panelID = $(this).data('panelId');
    $('#'+panelID).slideToggle("slow");
})
DA.
-1

Простейший способ заключается в использовании нескольких селекторов, http://api.jquery.com/multiple-selector/

4

Трудно сказать , не зная разметку, но вы должны дать общий класс для ваших .a, и .bт.д. элементов. Тогда вы могли бы использовать:

$(".repeatingClass h3").click(function() {
     $(".collapse-this", $(this).closest('.repeatingClass')).slideToggle("slow");
});

.closest()будет найти первый родитель , который соответствует селектору ( .repeatingClass), а затем я использую его в качестве контекста из .collapse-thisпоиска. Это означает , что он будет искать только в данном контексте, и его эквивалент $(this).closest('.repeatingClass').find('.collapse-this').

jsFiddle Demo, чтобы видеть, что я не вру;)

1
$(".a, .b, .c")
.addClass('repeatingClass')
.find('h3')
.click(function() {
   $(this).parents('.repeatingClass').find('.collapse-this').slideToggle("slow");
});