jQuery单击更改颜色

Question

我在jquery的click函数上遇到了一个非常愚蠢的麻烦

http://jsfiddle.net/icoltus/BdQU2/330/

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

您可以为每个跨度设置data-color属性，如下所示：

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

然后，您可以从它们获取data-color值并执行您想要的操作，只需执行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 =“ 1”，而不是id =“ 1”。

使用不带参数的.removeClass()摆脱所有类。

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

 .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; } 

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