Question

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

我可以做到这一点，但我需要一个解决方案，以便在这种情况下可以做3次，青铜，银和金。

下面是我的JSFiddle，显示它正常工作，它变为青铜并插入文本，但第二次点击不起作用，第三次点击不起作用。

希望有道理，

先谢谢你们！

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

Answer 2

由于您只有3个场景，因此您的方法很好。但是，更直观的方法是创建一个数组和一个索引，然后循环它们。这样，您只需要一次点击事件，而不是每步一次。

Updated Fiddle Here

var classes = ['emerging', 'expected', 'exceeding'];
var index = 0;

$('.progress1').click(function(){
    $(this).removeClass(); //Removes all classes

    $(this).addClass(classes[index]);
    $(this).text(classes[index]);

    if(index == (classes.length - 1)) {
        index = 0; //Reset index at end of array
    } else {
        index++; //Increment index if not at the end of array
    }
});

Answer 3

尝试这种方法。我使用了data属性来使它更清晰。

https://jsfiddle.net/mvinayakam/m4q3rgrq/

        <td class="progress" data-progress="base" ><span>&nbsp;<span></td>

Javascript部分

$('.progress').click(function(){
progressAttr=this.getAttribute('data-progress');
switch (progressAttr)
{
    case "base":
            this.setAttribute('data-progress',"emerging");
            break;
    case "emerging":
            this.setAttribute('data-progress',"exceeding");
            break;
}

}）;

CSS

[data-progress =“emerging”] { / *样式* / background-color：＃cd7f32; 颜色：#fff; text-align：center; }

[data-progress =“emerging”]：在{之后内容：“新兴”; }

每次点击更改Div类

3 个答案: