2015-12-13 11 views
7

Ich habe ein div, dieWie ändert man die aufgerufene Klasse in Javascript, wenn die Schaltfläche geklickt wird?

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

ich die add1 hinzufügen + thenumber Längen Beispiel werden wollen ist:

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

so, was ich tat ist

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

aber es funktioniert nicht Bitte helfen Sie mir :(

+0

ich die Frage nicht verstehen. Die '.length' von' .add1' wird jedoch viele Elemente enthalten, die mit dieser Klasse verbunden sind. Aber dann möchten Sie den Handler für einen _unterschiedlichen Satz von Objekten registrieren, die .'addN' als Klasse haben? Das klingt wie ein XY-Problem ... – Alnitak

+0

Wenn eine der Antworten geholfen hat, Ihre Frage zu beantworten, denken Sie bitte daran, diese als Antwort zu akzeptieren – Shogunivar

Antwort

0

Versuchen Sie diese

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

}); 
0

Das n muss außerhalb der Anführungszeichen stehen, sonst wird es als String interpretiert. Wie so:

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

Zuerst las ich deine Frage falsch und ich dachte, dass du die Klasse der div entsprechend ändern wolltest. Welche könnten Sie tun, wie folgt:

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 
}); 
+0

Bitte fügen Sie einige Kommentare zu Ihrer Lösung hinzu, warum und wie sie das Problem löst –

0

Hier ist es !! probiere das .. Ich code genau nach, was du brauchst.

<input type="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"/> 

Nun Haupt Skript finden, die Sie ..

 


    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 auf www.codedownload.in

danken Ihnen auch diesen Code geschrieben wird helfen.

1

Sie können die Nummer in einem Datenattribut speichern und bei jedem Klick erhöhen. Ändern Sie das Klassenattribut vom Datenattributwert.

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); 

}); 
0

Nutzen Sie .addClass() hinzuzufügen und .removeClass() Klassen zu entfernen

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

Her e ist das Beispiel: https://jsfiddle.net/danimvijay/ssfucy6q/

Wenn Sie die Klasse mit der Kombination einer Variablen auswählen möchten, verwenden Sie $('.add'+n) anstelle von $('.add+n').Hier

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

ist das Beispiel: http://jsfiddle.net/danimvijay/a0j4Latq/

Verwandte Themen