Question

我在jquery

上的点击功能遇到了一个非常愚蠢的麻烦

$('#1').click(function () {
         $('#hola').className = '';
         $('#hola').addClass('green');
     });
     $('#2').click(function () {

         $('#hola').className = '';
         $('#hola').addClass('orange');
     });

代码的目的是每当你点击一个球时，文字颜色就会改变，现在我有这个错误：

如果点击第3号球，文字会改变颜色，如果点击第2号球，文字颜色不会改变;之后，如果你点击第4号球，文字会改变它的颜色，那么如果你点击第3号球，文字颜色就不会改变（我认为你得到了问题所在）

我做错了什么？

Answer 1

查看已解决的代码：http://jsfiddle.net/32majraq/2/

您可以为每个跨度设置数据颜色属性，如下所示：

<div class="greenLine">
            <span data-color="green"></span>
            <span data-color='orange'></span>
            <span data-color='blue'></span>
            <span data-color='brown'></span>
            <span data-color='black'></span>
            <span data-color='red'></span>
            <span data-color='purple'></span>
            <span data-color='pink'></span>
            <span data-color='grey'></span>
        </div>
    <div id="hola">JHola</div>

然后你可以从中获取数据颜色值并做你想要的，只有7行代码：

$(document).ready(function(){
  let allSpans = $('.greenLine span');
  allSpans.on('click', function(){
    $('#hola').removeClass(); //Remove the class added before to add another
    $('#hola').addClass($(this).attr('data-color'))
  });

});

的更新

正如Martijn所说，所有类都将被删除，因此我制作了另一个修复此问题的代码：http://jsfiddle.net/32majraq/4/

let addedBefore = undefined; $(document).ready(function(){ let allSpans = $('.greenLine span'); allSpans.on('click', function(){ if(addedBefore !== undefined) $('#hola').removeClass(addedBefore); addedBefore = $(this).attr('data-color'); $('#hola').addClass(addedBefore); }); });

Answer 2

我更愿意以更高级的方式来做。使用HTML5的属性data

<强> HTML

<div class="greenLine">
  <span class="1" data-value="green"></span>
  <span id="2" data-value="orange"></span>
  <span id="3" data-value="blue"></span>
  <span id="4" data-value="brown"></span>
  <span id="5" data-value="black"></span>
  <span id="6" data-value="red"></span>
  <span id="7" data-value="purple"></span>
  <span id="8" data-value="pink"></span>
  <span id="9" data-value="grey"></span>
</div>
<div id="hola">JHola</div>

<强> JS

$(document).ready(function() {
  $('.greenLine>span').click(function() {
     var getclass = $(this).data('value');
     $('#hola').removeClass().addClass(getclass);
  });
});

http://jsfiddle.net/princesodhi/xLt63808/

Answer 3

您当前的逻辑不是最佳的。 您不应该清除所有类 。这不是一个好主意的原因是，如果您使用.remove()或.clasname=''删除所有类，您还会删除（将来）与颜色无关的相关类。

现在这可能不是问题，但这种思维方式将会让你在将来遇到麻烦。此外，当另一个程序员处理这样的代码时，他们不期望这种行为。

例如，假设您要添加新颜色，则必须更改删除类以匹配新颜色。或者与颜色无关的相关课程也将被删除，需要一个奇怪的解决方法。

您可以尝试不同的方法，而不是添加和删除类：您可以在html中设置data-*值，也可以使用css：

$('#1').click(function () {
     $('#hola').data('color','green');
});
$('#2').click(function () {
     $('#hola').data('color','orange');
});

现在你可以添加css来匹配这个：

[data-color="green"]{  background:green; }
[data-color="orange"]{ background:orange; }

您可以将其与masterjohn12的答案结合使用，而不是使用所有ID，使用select + data属性作为值。

Answer 4

这是解决方案，并且jfiddle：http://jsfiddle.net/BdQU2/335/

此外，第一个跨度有class =＆＃34; 1＆＃34;而不是id =＆＃34; 1＆＃34;。

使用不带参数的.removeClass()，删除所有类。

＆＃13;

      $(document).ready(function () {
         $('#1').click(function () {
             $('#hola').removeClass();
             $('#hola').addClass('green');
             
         });
         $('#2').click(function () {

             $('#hola').removeClass();
             $('#hola').addClass('orange');
         });
          $('#3').click(function () {

             $('#hola').removeClass();
             $('#hola').addClass('blue');
         });
          $('#4').click(function () {

             $('#hola').removeClass();
             $('#hola').addClass('brown');
         });
          $('#5').click(function () {

             $('#hola').removeClass();
             $('#hola').addClass('black');
         });
          $('#6').click(function () {

             $('#hola').removeClass();
             $('#hola').addClass('red');
         });
          $('#7').click(function () {

             $('#hola').removeClass();
             $('#hola').addClass('purple');
         });
          $('#8').click(function () {

             $('#hola').removeClass();
             $('#hola').addClass('pink');
         });
          $('#9').click(function () {

             $('#hola').removeClass();
             $('#hola').addClass('grey');
         });
     });

＆＃13;

.greenLine {
    border-radius: 5px;
    background-color: #24cda3;
    height: 8px;
    width: 200px;
    position: relative;
}
.greenLine span {
    top: -8px;
    border-radius: 50%;
	width: 15px;
	height: 15px; 
    background-color: #FFFFFF;
    position: absolute;
    cursor: pointer;
}
.greenLine span:nth-child(1) {
    left: -1%;
}
.greenLine span:nth-child(2) {
    left: 12.5%;
}
.greenLine span:nth-child(3) {
    left: 25%;
}
.greenLine span:nth-child(4) {
    left: 37.5%;
}
.greenLine span:nth-child(5) {
    left: 50%;
}
.greenLine span:nth-child(6) {
    left: 62.5%;
}
.greenLine span:nth-child(7) {
    left: 75%;
}
.greenLine span:nth-child(8) {
    left: 87.5%;
}
.greenLine span:nth-child(9) {
    left: 98.5%;
}

#hola {
   color:wheat;
}
#hola.green {
    color:green;
}
#hola.orange {
    color:orange;
}
#hola.blue {
    color: blue;
}
#hola.brown {
    color: brown;
}
#hola.black {
    color:brown;
}
#hola.red {
    color: red;
}
#hola.purple {
    color:purple;
}
#hola.pink {
    color: pink;
}
#hola.grey {
    color: gray;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="greenLine">
            <span id="1"></span>
            <span id="2"></span>
            <span id="3"></span>
            <span id="4"></span>
            <span id="5"></span>
            <span id="6"></span>
            <span id="7"></span>
            <span id="8"></span>
            <span id="9"></span>
        </div>
<div id="hola">JHola</div>

＆＃13;

JQuery在点击时改变颜色

4 个答案:

的更新