Compteur de Clics Haut/Bas

Question

Incroyablement simple que cela puisse paraître, j'ai de la difficulté à gérer cela. En d'autres termes, si je clique sur un élément avec l'identifiant "Compteur" alors que la touche majuscule est enfoncée, l'entier encapsulé par Total devrait augmenter. Si alt est maintenu lorsqu'on clique dessus, il descend.

$('#Counter').click(function(x) { 
    if(x.altKey) { 
     $('#Counter').html(parseInt($('#Total').html())-1); 
    } 
    if (x.shiftKey) { 
     $('#Counter').html(parseInt($('#Total').html())+1); 
    } 
}); 

/////////// 

<div id="Counter"><span id="Total">100</span></div> 

Answer 1

Je peux voir votre problème, vous voulez analyser <span id="Total">100</span> en nombre. Tu ne peux pas faire ça. En outre, vous définissez le html de #counter à un nombre et ainsi vous perdez #Total.

Ce que vous voulez, est:

$('#Counter').click(function(x) { 
    if(x.altKey) { 
     $('#Counter').html(parseInt($('#Counter').html())-1); 
    } 
    if (x.shiftKey) { 
     $('#Counter').html(parseInt($('#Counter').html())+1); 
    } 
}); 

<div id="Counter">100</div> 

Answer 2

Vous écrasez la balise span, c'est pourquoi il ne fonctionne que sur le premier clic, après qu'il n'y a pas de balise span avec l'id total

Essayez:

$('#Counter').click(function (x) { 

     if (x.altKey) { 
      $('#Counter').html('<span id="Total">' + (parseInt($('#Total').html()) - 1) + '</span>'); 

     } 
     if (x.shiftKey) { 
      $('#Counter').html('<span id="Total">' + (parseInt($('#Total').html()) + 1) + '</span>'); 
     } 
    }); 

ou encore plus concise:

$('#Counter').click(function (x) { 

     if (x.altKey) { 
      $('#Total').html((parseInt($('#Total').html()) - 1)); 

     } 
     if (x.shiftKey) { 
      $('#Total').html((parseInt($('#Total').html()) + 1)); 
     } 
    });