1
votes

Obtenez la valeur de la classe en cliquant sur ()

J'utilise jQuery pour activer une fonction chaque fois que l'utilisateur clique sur un bouton qui a une certaine classe. J'essaie d'obtenir la valeur du bouton cliqué, et jusqu'à présent, j'échoue.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button" value="7">7</button>

window.onload = function() {
    $('.button').click(function(item) {
        console.log(item.value);
    });
}

Le résultat attendu serait "7", puisque c'est la valeur du bouton. Actuellement, je ne suis pas défini.

Merci d'avance!

javascript jquery html

4 commentaires

utilisez item.target.value ou this.value pour atteindre l'élément au lieu de l'objet événement.

Utilisez console.log (item) pour voir ce que vous avez réellement: un événement.

Cela marche! Merci beaucoup. Je regardais à travers tout ce que l'événement a, mais je n'ai tout simplement pas vu la valeur.

@IvanPenev si ma solution fonctionnait pour vous, pourriez-vous marquer ma solution comme réponse acceptée?

4 Réponses :

1
votes

Vous pouvez le faire avec du JavaScript vanille:

   function myFunc(value){
       console.log(value)
   }

Le script:

   <button class="button" 
   onclick="myFunc(7)">7</button>

2 commentaires

Avec ce petit script? Comment?

Ah je vois, j'ai oublié la "fonction" à la fin

2
votes

Si vous voulez vous en tenir à l'utilisation de JQuery uniquement, utilisez $ (this) .val () Cela devrait vous donner la valeur du bouton.

changez votre JS en ceci: p>

$(document).ready (function() {
    $('.button').click(function(item) {
        console.log($(this).val());
    });
});

Essayez également ce Jsfiddle pour voir si c'est ce que vous recherchez: https://jsfiddle.net/9zjLfso8/

Aussi si vous allez utiliser jQuery, je vous recommande d'utiliser $ (document) .ready au lieu de window.onload . Voici un lien pour voir la différence entre les deux: window.onload vs $ (document) .ready ( )

0 commentaires

2
votes

window.onload = function() {
    $('.button').click(function(e) {
        console.log(e.target.textContent);
    });
}

0 commentaires

2
votes

basic one ...

Pure jQuery:

<button class="button" value="7"> bt 7 </button>

<button class="button" value="8"> bt 8 </button>

window.onload = function() {

  document.querySelectorAll('.button').forEach(bt=>{
    bt.onclick=e=>{
      console.clear()
      console.log(e.target.textContent,' = ', e.target.value) 
    }
  })
}

Pure JS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button" value="7">bt 7</button>
<button class="button" value="8">bt 8</button>

$(document).ready(function() {
  $('.button').click(function(item) {
    console.clear();
    console.log( $(this).text(), ' = ', $(this).val() );
  });
})

0 commentaires