CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user4728575
user4728575

Reputation:

CSS for specific div with multiple div having same class

I have multiple div with same class. When a user taps on one div i have a slidetoggle() in that i have two buttons "accept" and "reject". Now when the user clicks on the accept or rejects i want that specific div to change colour to green or red based on accept or reject.

But when i try to assign the colour all the div change colour.

Is there anyway to change the colour of the specific div.

$(document).on("pagecreate","#one1",function(){
    $("div.comp2").on("tap",function(){
    $("#panel").slideToggle("slow", function(){
        $("#accept").on("click",function(){
            $("div.comp2").css("background-color","#22bb45"); 
        });
    });
    });
});

Upvotes: 1

Views: 342

Answers (2)

ozil
ozil

Reputation: 7117

$(document).on("pagecreate","#one1",function(){
    $("div.comp2").on("tap",function(){
    var __this = this;
    $("#panel").slideToggle("slow", function(){
        $("#accept").on("click",function(){
            $(__this).css("background-color","#22bb45"); 
        });
    });
    });
});

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

Within the event handler you can use the this keyword to refer only to the element which raised the event, instead of selecting all of the elements by class. Try this:

$(document).on("pagecreate","#one1",function(){
    $("div.comp2").on("tap", function() {
        var $comp2 = $(this);
        $("#panel").slideToggle("slow", function(){
            $("#accept").on("click", function(){
                $comp2.css("background-color","#22bb45"); 
            });
        });
    });
});

Upvotes: 1

Related Questions