JQuery können Sie bei jedem weiteren Klick ein anderes Element anzeigen?

Question

Ich habe eine wirklich einfache Idee ... habe eine Schaltfläche (class = "upload"), die bei jedem weiteren Klick, ich möchte es ein neues Div anzeigen, für eine maximale Anzahl von Malen.

Zum Beispiel:

$('.upload').click(function() { 
      $('.upload_block2').show(0); 
     }, function() { 
      $('.upload_block3').show(0); 
     }, function() { 
      $('.upload_block4').show(0); 
     }, function() { 
      $('.upload_block5').show(0); 
      $('.upload').hide(0); 
     }); 

Offensichtlich ist die obige Code funktioniert nicht ...

Ist das überhaupt möglich?

Answer 1

Deklarieren Sie zwei globale Variablen, eine für die Gesamtzahl der anzuzeigenden Blöcke, eine weitere für den aktuellen Block, der angezeigt wird. Wenn Sie auf .upload klicken, überprüfen Sie currentBlock < maxBlock. Wenn dies der Fall ist, inkrementieren Sie den aktuellen Block, der angezeigt werden soll, und verketten Sie .upload_block mit currentBlock, um den jquery-Selektor zu erhalten.

var maxBlock = 5; 
var currentBlock = 1; 
$('.upload').click(function() { 
    if(currentBlock < maxBlock) { 
     currentBlock ++; 
     $('.upload_block' + currentBlock).show(0); 
    } 
}); 

Answer 2

Try this:

var count = 1; 
$('.upload').click(function(){ 
    $(body).append('<div id="Div'+count+'"></div>'); 
    count++; 
}); 

Dies wird eine neue div jedes Mal mit einer eindeutigen ID auch anhängen.

Answer 3

Ich hoffe, es wird für Sie arbeiten.

$('.upload').toggle(function() { 
     $('.upload').hide(0); 
     $('.upload_block2').show(0); 
    }, function() { 
     $('.upload').hide(0); 
     $('.upload_block3').show(0); 
    }, function() { 
     $('.upload').hide(0); 
     $('.upload_block4').show(0); 
    }, function() { 
     $('.upload').hide(0); 
     $('.upload_block5').show(0); 
}); 

Refere: http://www.w3schools.com/jquery/event_toggle.asp