CODEWITHSUNDEEP
jqueryhtmlcss
DWTBC
DWTBC

Reputation: 285

Jquery - how to differentiate between multiple buttons with the same class

I am building a website with boxes that has a settings button which triggers a sliding-down-effect on the box.

The button and the sliding-down-box have to be generated by a class each and not an id (as it is now), to make my code less complicated and short.

Eventually it will be several buttons (btn1, btn 2, btn3 etc.) and boxes (box1, box2, box3 etc.), so to shorten my jQuery code I would like an overall code that triggers each button individually instead of trigger them all at the same time. It needs to be triggered by a class, because i'm planning on some php, where the user will be able to add a widget.

Here is my example: http://www.danieldoktor.dk/test/test.html

My code is this:

HTML

<div class="lists">
        <header class="box_header" id="box1">
            <h1>HEADER 1</h1>
            <div class="setting" id="btn1"></div>
            </header>
 </div>

 <div class="lists">
        <header class="box_header" id="box2">
            <h1>HEADER 2</h1>
            <div class="setting" id="btn2"></div>
            </header>
 </div>

jQuery

// widget 1

  $("#btn1").click(function () { 
    if(!$("#box1").hasClass('header-down')){
        $("#box1").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
    }
    else{
        $("#box1").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
    }

}); 


$(document).click(function() {
    if($("#box1").hasClass('header-down')){
        $("#box1").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});

$("#box1").click(function(e) {
    e.stopPropagation(); // This is the preferred method.
           // This should not be used unless you do not want
                         // any click events registering inside the div
});



 // widget 2

  $("#btn2").click(function () { 
    if(!$("#box2").hasClass('header-down')){
        $("#box2").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
    }
    else{
        $("#box2").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
    }

}); 


$(document).click(function() {
    if($("#box2").hasClass('header-down')){
        $("#box2").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});

$("#box2").click(function(e) {
    e.stopPropagation(); // This is the preferred method.
           // This should not be used unless you do not want
                         // any click events registering inside the div
});

How would you go about making an overall script build with classes and not id's and still control each class as a unique id? See this psydo class which explain what I want:

// widget overall

      $(".someBtnClass").click(function () { 
        if(!$(".someBoxClass").hasClass('header-down')){
            $(".someBoxClass").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
        }
        else{
            $(".someBoxClass").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
        }

    }); 


    $(document).click(function() {
        if($(".someBoxClass").hasClass('header-down')){
            $(".someBoxClass").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
    }
    });

    $(".someBoxClass").click(function(e) {
        e.stopPropagation(); // This is the preferred method.
               // This should not be used unless you do not want
                             // any click events registering inside the div
    });

Upvotes: 0

Views: 5165

Answers (1)

codefreak
codefreak

Reputation: 7131

Check jQuery.each http://api.jquery.com/jQuery.each/

You can bind click events on each button using class as selector by 

$(".some-class").each(function(){
    $(this).on("click", function(){});
});

The trick is that jQuery .each() will make sure this inside of the function is the DOM node.

Upvotes: 2

Related Questions