检查其子元素被点击

Question

我想验证了“质量”的元素被点击

$("#content").on('click', ".delinquent > .quality", function(){ 
    selected = this; 
    $(".quality", $(selected).parent()).each(function(){ 
     if (selected == this){ 
      $(this).toggleClass("selected", true); 
      $(this).toggleClass("unselected", false); 
     }else{ 
      $(this).toggleClass("selected", false); 
      $(this).toggleClass("unselected", true); 
     } 
    }); 
}) 

这是我尝试使用的代码，但它似乎并不认为它的工作原理，因为所有.quality跨度都有.selected类。

Answer 1

我想我明白你在做什么。您想要将选定的课程应用于点击的高质量项目，并对其余质量项目应用未选中的课程。假设所有的.quality元素是彼此的兄弟姐妹，你可以像这样简化你的代码。

$("#content").on('click', ".delinquent > .quality", function(){ 
    $(this) 
     //Add selected class to the current item clicked 
     .removeClass('unselected').addClass('selected') 
     //Find all the siblings and add unselected class 
     .siblings().removeClass('selected').addClass('unselected); 
}) 

Answer 2

Event Delegation在Javascript中是一件美妙的事情。

事件对象包含target，它是触发事件的元素。你可以这样访问它：

$("#content").on('click', ".delinquent > .quality", function (e) { 
    console.log(e.target); 
});