为什么.click（function（）适用于每个元素？

Question

你好，谢谢你的时间，

我在使用$（＆＃34; .Common＆＃34;）时出现轻微问题。单击（function（）{无论是否单击的元素包含.Common类，都会触发，我想要它如果单击的元素具有.Common，则仅应用类.chosen。我的代码：

$(document).ready(function(){
        $(".Common").click(function() {
        $(".Common").removeClass(".Common");
        $(this).addClass('chosen');
    });

       $(".Common").click(function(){ 
        var classes = $(this).attr("data");

            $( ".highlighted" ).removeClass( "highlighted" );
            $( ".Common" ).removeClass( "Common" );
            $( "."+classes ).addClass( "highlighted" );
            $( "."+classes ).addClass( "Common" );

     });

});

和HTML

     <div data="WHAT" class="Common" >What</div>
     <div data="NAME" class="Common YOUR" >Name</div>
     <div data="ARE" class="Common WHAT" >Are</div>
     <div data="IS" class="Common WHAT" >Is</div>
     <div data="SKILLS" class="Common YOUR" >Skills</div>
     <div data="YOUR" class="Common ARE IS DO" >Your</div>
     <div data="LIKE" class="Common hdo YOUR" >Like</div>
     <div data="PRESSURE" class="Common WHAT" >Pressure</div>
     <div data="EXPERIENCE" class="Common YOUR" >Experience</div>
     <div data="DIFFICULTIES" class="Common YOUR" >Difficulties</div>
     <div data="DO" class="Common WHAT" >Do</div>
     <div data="MOTIVATION" class="Common YOUR" >Motivation</div>
     <div data="LIVE" class="Common YOUR" >Live</div>
     <div data="GOALS" class="Common WHAT" >Goals</div>
     <div data="FEAR" class="Common hdo YOUR" >Fear</div>
     <div data="LOVE" class="Common hdo YOUR" >Love</div>
     <div data="WEAKNESS" class="Common YOUR" >Weakness</div>
     <div data="FUTURE" class="Common YOUR" >Future</div>
     <div data="SKILLS" class="Common YOUR HAVE" >Skills</div>
     <div data="GIVE" class="Common YOUR" >Give</div>
     <div data="HELP" class="Common YOUR" >Help</div>
     <div data="PASSION" class="Common YOUR" >Passion</div>
     <div data="STRENGTHS" class="Common YOUR" >Strengths</div>
     <div data="CREATE" class="Common hdo YOUR" >Create</div>
     <div data="AGE" class="Common YOUR" >Age</div>
     <div data="HAVE" class="Common WHAT" >Have</div>
     <div class="finish SKILLS NAME AGE">?</div>

和CSS

.chosen{
background-color:blue;
}
.highlighted{
background-color:yellow;
}

如果有人能告诉我问题是什么，我会很高兴。这是问题的一个小提琴：http://jsfiddle.net/au8o0Lz6/15/

提前多多感谢！

Answer 1

在运行$函数时，将该函数绑定为作为该类成员的每个元素的单击事件处理程序。

如果您想在点击时测试点击的元素是否是类的成员，那么您有两个选择：

• 在点击处理程序中进行测试，看看它是否仍然是该类的成员（例如$(this).is(".Common");）
• 使用委派的事件处理程序（$(document).on('click', '.Common', function(event) { /* ... */ });

Answer 2

  

我在使用$（＆＃34; .Common＆＃34;）时出现轻微问题。单击（function（）{无论是否单击的元素包含.Common类，都会触发，我想要它如果单击的元素具有.Common，则仅应用类.chosen。

问题在于，您的代码正在将处理程序连接到具有类class EmployeeOrder { public int Id {get; set;} public int OrderId {get; set;} public int Number {get; set; } ... var orders = oc.Translate<EmployeeOrder>(reader).ToLookup(x => x.Id); employee.Orders = orders[employee.Id].Select(x => new Order { OrderId = x.OrderId, Number = x.Number }.ToList(); 的元素，直到运行该代码时。如果稍后删除该类，则它对事件处理程序是否附加到元素没有影响。

如果您希望处理程序是否根据元素在发生单击时是否具有类而触发，则可以使用事件委派来执行此操作：将事件挂钩到容器元素上全部在（如果你愿意，它可以是Common）告诉jQuery你只对该事件感兴趣，如果该元素具有类document：

Common

您引用的代码还让您多次连接处理程序，一次在$(document).on("click", ".Common", function() { // Code here }); 回调中，一次不在ready回调中。 （它似乎最后还有一个悬空ready，这应该会引发语法错误。）

最后，});不是有效的属性名称。自定义属性必须以data开头，因此可能data-代表您正在做的事情。

查看你的代码，你可能想要这样的东西：

data-class

如果您控制脚本标记的位置，请将其放在文档的结束的标记中。否则，请将其包装在$(document).on("click", ".Common", function() { var selector = "." + $(this).attr("data-class"); $(".highlighted").removeClass("highlighted"); $(".Common").removeClass("Common"); $(selector).addClass("highlighted"); $(selector).addClass("Common"); }); 回调中。

示例：

＆＃13;

＆＃13;

ready

＆＃13;

$(document).on("click", ".Common", function() {
  var selector = "." + $(this).attr("data-class");

  $(".highlighted").removeClass("highlighted");
  $(".Common").removeClass("Common");
  $(selector).addClass("highlighted");
  $(selector).addClass("Common");
});

＆＃13;

.chosen {
  background-color: blue;
}
.highlighted {
  background-color: yellow;
}

＆＃13;

＆＃13;

＆＃13;

......但也可能还有其他事情发生。以上至少改变了所描述的类。

Answer 3

如果您需要，请尝试以下代码，

＆＃13;

＆＃13;

		$(document).ready(function() {
		  $(".Common").click(function() {
		    $(".Common").removeClass(".Common");
		    $(this).addClass('chosen');

		  });

		  $(".Common").on('click', function() {
		    if ($(this).hasClass('Common')) {
		      var classes = $(this).attr("data");
		      //$( ".Common" ).removeClass( "Common" );
		      $(this).addClass("chosen");
		      //$( "."+classes ).addClass( "Common" );

		    }

		  });

		});

＆＃13;

.chosen {
  background-color: blue;
}
.highlighted {
  background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container2">
  <div data="WHAT" class="Common">What</div>
  <div data="NAME" class="Common YOUR">Name</div>
  <div data="ARE" class="Common WHAT">Are</div>
  <div data="IS" class="Common WHAT">Is</div>
  <div data="SKILLS" class="Common YOUR">Skills</div>
  <div data="YOUR" class="Common ARE IS DO">Your</div>
  <div data="LIKE" class="Common hdo YOUR">Like</div>
  <div data="PRESSURE" class="Common WHAT">Pressure</div>
  <div data="EXPERIENCE" class="Common YOUR">Experience</div>
  <div data="DIFFICULTIES" class="Common YOUR">Difficulties</div>
  <div data="DO" class="Common WHAT">Do</div>
  <div data="MOTIVATION" class="Common YOUR">Motivation</div>
  <div data="LIVE" class="Common YOUR">Live</div>
  <div data="GOALS" class="Common WHAT">Goals</div>
  <div data="FEAR" class="Common hdo YOUR">Fear</div>
  <div data="LOVE" class="Common hdo YOUR">Love</div>
  <div data="WEAKNESS" class="Common YOUR">Weakness</div>
  <div data="FUTURE" class="Common YOUR">Future</div>
  <div data="SKILLS" class="Common YOUR HAVE">Skills</div>
  <div data="GIVE" class="Common YOUR">Give</div>
  <div data="HELP" class="Common YOUR">Help</div>
  <div data="PASSION" class="Common YOUR">Passion</div>
  <div data="STRENGTHS" class="Common YOUR">Strengths</div>
  <div data="CREATE" class="Common hdo YOUR">Create</div>
  <div data="AGE" class="Common YOUR">Age</div>
  <div data="HAVE" class="Common WHAT">Have</div>
  <div class="finish SKILLS NAME AGE">?</div>
</div>

＆＃13;

＆＃13;

＆＃13;