当按钮被点击时，如何更改JavaScript中所调用的类？

Question

我有一个div，它是

<div class="add1"></div>

我希望把add1变成add+长度的数字，例如：

var n= $('.add1').length + 1;  
$('.add1').click(function(){

所以我做的是

$('.add+n').click(function(){

但是它不起作用，请帮助我 :(

- user101

---

我无法理解这个问题。.add1的.length将是具有该类的元素数量。但是您想要在具有.addN作为其类的不同对象集上注册处理程序？这听起来像一个XY问题... - Alnitak

如果其中一个答案帮助您解决了问题，请考虑接受该答案作为答案。 - Shogunivar

Answer 1

你可以将数字存储在数据属性中，并在每次点击时进行增量操作。将类属性从数据属性值更改。

HTML

  <div id="myDiv" data-num='1' class="add1">click me</div> 

JS

document.getElementById('myDiv').addEventListener('click', function(){

var num = Number(this.getAttribute('data-num'));
num++;
this.setAttribute('data-num', num)

this.setAttribute('class', 'add' + num);

});

- CodeToad

Answer 2

试试这个

$('.add'+n).click(function(){

});

- ashkufaraz

Answer 3

n 需要放在引号外面，否则它会被解释为字符串。就像这样：

$('.add' + n).click(function(){

起初我误读了你的问题，以为你想相应地更改div的类。你可以像这样做：

var n = 1;
var n= $('.add'+1).length + 1;  

$('.add' + n).click(function(){
   $(this).attr('class', 'add' + n);  //for if you also want to change the class of the div
});

- Shogunivar

---

请在您的解决方案中添加一些注释，说明它为什么以及如何解决问题。 - Bhavesh Odedra

Answer 4

就在这里！试试这个...我按照你需要的完全编码了。

<input type="text" style="display:none;" name="qty" value="0" />

<p id="inc" class="">它的类将会增加[与数字连接]</p>

<input type="button" id="btn" name="btn" value="increase"/>

现在以下是一个主要的脚本，将帮助您...

    var incrementVar = 0;
    $(function() {
    $("#btn").click(function() {
        var value = parseInt($(":text[name='qty']").val()) + 1;
        $(":text[name='qty']").val(value);
        $('#inc').removeClass('a' + (value-1));
        $('#inc').addClass('a' + value); // 我相信类名不能以数字开头
        incrementVar = incrementVar + value;
    });
});

我还在www.codedownload.in上发布了这段代码。

谢谢。

- Jimit Upadhyay

Answer 5

使用.addClass()添加类，使用.removeClass()删除类

$('.add1').click(function(){
    var n= $('.add1').length + 1; //reads n
    $(".add1").addClass("add"+n); //adds new class
    $(".add"+n).removeClass("add1"); //removes existing class
});

这是一个例子：https://jsfiddle.net/danimvijay/ssfucy6q/ 如果你想选择一个变量的组合类，请使用$('.add'+n)而不是$('.add+n')。

$('.add'+n).click(function(){
//place code here
});

这是一个例子：http://jsfiddle.net/danimvijay/a0j4Latq/

- Dani Vijay