javascript - 为什么.click(function()在每个元素上都起作用？

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

我在$（“。Common”）。click（function（）{上有一个小问题，无论单击的元素是否包含.Common类，它都会触发，我希望它仅在单击元素时才应用.chosen类有.Common我的代码：

$(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/

在此先多谢！

最佳答案

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

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