javascript - 每次点击时更改 Div 类

Question

我正在构建 Bootstrap HTML 和 PHP 网站。基本上我需要一个解决方案，以便当单击 div 时它会改变颜色并添加一些文本。

我可以做到这一点，但我需要一个解决方案，以便可以完成 3 次，在本例中为铜牌、银牌和金牌。

下面是我的 JSFiddle，它显示它正在工作，它变为青铜色并按应有的方式插入文本，但是第二次单击将不起作用，第三次单击将不起作用。

https://jsfiddle.net/vvecu9qa/1/

希望这是有道理的，

提前谢谢大家!

HTML

<table class="table table-bordered">
<tbody>
    <tr>
        <td>Name</td>
        <td>Spin on a variety of body parts</td>
        <td>Spin with control and body tension</td>
        <td>Spin in a variety of shapes</td>
        <td>Identify appropriate places to perform a spin</td>
    </tr>
    <tr>
        <td><a href="#">Jon Smith</a></td>
        <td class="progress1">&nbsp;</td>
        <td class="progress2">&nbsp;</td>
        <td class="progress3">&nbsp;</td>
        <td class="progress4">&nbsp;</td>
    </tr>
</tbody>

CSS

.emerging {
  background-color: #cd7f32;
  color: #fff;
  text-align: center;
}
.expected {
  background-color: #c0c0c0;
  color: #fff;
  text-align: center;
}
.exceeding {
  background-color: #ffd700;
  color: #fff;
  text-align: center;
}

JavaScript

$('.progress1').click(function(){
  $(".progress1").removeClass("progress1");
  $(this).addClass('emerging');
  $(this).text('Emerging');
});
$('.emerging').click(function(){
  $(".emerging").removeClass("emerging");
  $(this).addClass('expected');
  $(this).text('Expected');
});
$('.expected').click(function(){
  $(".expected").removeClass("expected");
  $(this).addClass('exceeding');
  $(this).text('Exceeding');
});

Answer 1

像这样改变你的脚本，它会起作用

$(document).on("click",'.progress1',function(){
    $(".progress1").removeClass("progress1");
    $(this).addClass('emerging');
     $(this).text('Emerging');
});

$(document).on("click",'.emerging',function(){
    $(".emerging").removeClass("emerging");
    $(this).addClass('expected');
    $(this).text('Expected');
});

$(document).on("click",'.expected',function(){
    $(".expected").removeClass("expected");
    $(this).addClass('exceeding');
    $(this).text('Exceeding');
});

这里是更新的fiddle link