javascript - 每次点击时更改 Div 类

标签 javascript php html css

我正在构建 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');
});

最佳答案

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

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

关于javascript - 每次点击时更改 Div 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32764756/

相关文章:

php - 在 MySQL 中存储 HTML5 地理位置信息

php - 在php中更新数据库

javascript - 粘性表头

php - 我无法使用 Composer 安装 Laravel(缺少 ext-zip 扩展名)

html - 使用 Twitter Bootstrap 将响应式图像插入 ASP.NET MVC5 元素

css - html - 如何制作宽度为自动的滚动条?

javascript - 如何使嵌入 View 中的 Ember 组件中的数据绑定(bind)起作用?

javascript - 输入值禁用 Enter 键

javascript - 如何以 angularjs 形式添加数组大小验证规则?

javascript - 在某个函数中包含函数