javascript - jQuery点击改变颜色

Question

我在使用 jquery 的点击功能时遇到了一个非常愚蠢的问题

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/

您可以像这样为每个跨度设置数据颜色属性:

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

});