J'ai un groupe de boutons composé de quatre boutons, ce que j'essaie de faire, c'est que chaque fois que l'utilisateur clique sur un bouton, je veux récupérer son texte

  • Je fais quelque chose comme ça
$(".btn").click(function() {
  var button_text = $('#oneMonth').text();
  alert(button_text)
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="btn-group" role="group" align="center">

  <button type="button" class="btn btn-primary" id="sevenDays">Seven Days</button>
  <button type="button" class="btn btn-primary" id="oneMonth">One Month</button>
  <button type="button" class="btn btn-primary" id="sixMonths">Six Months</button>
  <button type="button" class="btn btn-primary" id="oneYear">One Year</button>
</div>

Je fais quelque chose comme ça mais ce n'est pas la bonne façon car je dois mettre chaque identifiant de bouton pour obtenir le texte

Je veux faire comme si l'utilisateur clique sur n'importe quel bouton, il suffit d'obtenir le texte de ce bouton uniquement

-2
vivek singh 19 mars 2019 à 09:30

2 réponses

Meilleure réponse

Utilisez le mot clé this au lieu d'un sélecteur spécifique dans l'alerte pour obtenir le texte du bouton cliqué

var button_text = $(this).text();

Cela donnera toujours le texte du bouton avec l'id oneMonth

$('#oneMonth').text();
$(".btn").click(function() {
  var button_text = $(this).text();
  alert(button_text)
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="btn-group" role="group" align="center">

  <button type="button" class="btn btn-primary" id="sevenDays">Seven Days</button>
  <button type="button" class="btn btn-primary" id="oneMonth">One Month</button>
  <button type="button" class="btn btn-primary" id="sixMonths">Six Months</button>
  <button type="button" class="btn btn-primary" id="oneYear">One Year</button>
</div>
0
ellipsis 19 mars 2019 à 06:31

Vous pouvez le faire en ajoutant le this jQuery à votre code. Voici un extrait fonctionnel :

var buttons = $("button");
buttons.click(function() {
  $(".display__text").text($(this).text());
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="btn-group" role="group" align="center">

  <button type="button" class="btn btn-primary" id="sevenDays">Seven Days</button>
  <button type="button" class="btn btn-primary" id="oneMonth">One Month</button>
  <button type="button" class="btn btn-primary" id="sixMonths">Six Months</button>
  <button type="button" class="btn btn-primary" id="oneYear">One Year</button>
</div>

<div class="display__text"></div>
0
Code_Ninja 19 mars 2019 à 06:35