单击按钮时如何更改javascript中调用的类?

I have a div which is

我有一个div

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

I want the add1 become add+thenumber of length example:

我要把add1变成add+the umber of length示例:

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

so what I did is

我所做的是

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

but it doesnt work, please help me :(

但是不行，请帮帮我

5 个解决方案

#1

You can store the number in a data attribute and increment on every click. Change the class attribute from the data attribute value.

您可以将数字存储在数据属性中，并在每次单击时进行递增。从数据属性值中更改类属性。

HTML

HTML

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

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

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

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

});

#2

Try this

试试这个

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

});

#3

the n needs to be outside of the quotes else it will interpret it as a string. Like so:

n需要在引号之外否则它将把它解释为字符串。像这样:

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

At first i read your question wrong and i thought you wanted to change the div's class accordingly. Which you could do like this:

一开始我看错了你的问题，我以为你想相应地改变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
});

#4

Make use of .addClass() to add and .removeClass() to remove classes

使用.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
});

Here is the example: https://jsfiddle.net/danimvijay/ssfucy6q/

这里有一个例子:https://jsfiddle.net/danimvijay/ssfucy6q/

If you want to select the class with combination of a variable, use $('.add'+n) instead of $('.add+n').

如果您想选择具有变量组合的类，请使用$('.add'+n)而不是$('.add+n')。

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

Here is the example: http://jsfiddle.net/danimvijay/a0j4Latq/

这里有一个例子:http://jsfiddle.net/danimvijay/a0j4Latq/

#5

Here it is!! try this .. I code following exactly you need.

在这里! !试试这个. .我按照你需要的进行编码。

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

<输入类型="text" style="display:none;" name="qty" value="0" />

<p id="inc" class="">It's class will be Increased[concate with number]</p>

它的类将会增加[以数字表示]

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

Now following is Main script that will help you ..

下面是帮助你的主要脚本。



    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); // I believe class names cannot start with a number
        incrementVar = incrementVar + value;
    });
});

i posted this code also on www.codedownload.in

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

Thank You.

谢谢你！

#1