为什么 .click(function() 适用于每个元素？

Question

您好，感谢您的宝贵时间，

我在使用 $(".Common").click(function(){ 时遇到一个小问题，无论单击的元素是否包含 .Common class，它都会触发，我只希望它如果单击的元素具有 .Common，则应用 class .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;
}

如果有人能告诉我问题出在哪里，我将非常高兴。这是问题的 fiddle：http://jsfiddle.net/au8o0Lz6/15/

提前致谢！

Answer 1

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

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

在点击处理程序内部进行测试，看看它是否仍然是 class 的成员（例如 $(this).is(".Common");）

使用委托事件处理程序（$(document).on('click', '.Common', function(event) { /* ... */ });

Answer 2

I'm having a slight problem with $(".Common").click(function(){ which triggers no matter if the element clicked contains the .Common class, I want it to only apply the class .chosen if the element clicked had the .Common.

问题是您的代码正在将处理程序连接到具有 class Common 的元素，截至该代码为运行。如果稍后删除 class，它不会影响事件处理程序是否附加到元素。

如果您希望根据元素是否具有 class 单击发生时 触发或不触发处理程序，您可以使用事件委托来实现: 将事件挂接到一个容器元素上，这些都在（如果你愿意，它可以是 document）并告诉 jQuery 你只对元素具有 class 的事件感兴趣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");
});

如果您控制脚本标签的位置，请将其放在文档结尾的标签中。否则，将其包装在 ready 回调中。

示例：

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

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

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

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

...但可能还有其他事情正在发生。以上至少改变了 classes 描述。

Answer 3

如果这是您的需要，请尝试下面的代码，

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

      }

    });

  });

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

<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>

为什么 .click(function() 适用于每个元素？

Why does .click(function() work on every element?

javascript

jquery

click