CSS для конкретного div с несколькими div, имеющих тот же класс

Question

У меня есть несколько div с тем же классом. Когда пользователь нажимает на один div, у меня есть slidetoggle(), в котором у меня есть две кнопки «принять» и «отклонить». Теперь, когда пользователь нажимает на accept или rejects, я хочу, чтобы конкретный div менял цвет на зеленый или красный на основе accept или reject.

Но когда я пытаюсь назначить цвет всем цветом изменения div.

Есть ли способ изменить цвет конкретного 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"); 
     }); 
    }); 
    }); 
}); 

Answer 1

В обработчике события вы можете использовать ключевое слово 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"); 
      }); 
     }); 
    }); 
}); 

Answer 2

$(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"); 
     }); 
    }); 
    }); 
});