Блог

Главная - Вопросы по программированию - При нажатии группы кнопок как определить, какая кнопка нажата

При нажатии группы кнопок как определить, какая кнопка нажата

#javascript #jquery

#javascript #jquery

Вопрос:

у меня есть группа кнопок, состоящая из четырех кнопок, что я пытаюсь сделать, так это всякий раз, когда пользователь нажимает на любую кнопку, я хочу получить ее текст

  • Я делаю что-то вроде этого

 $(".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>

Я делаю что-то подобное, но это неправильный способ, поскольку я должен указывать каждый идентификатор кнопки, чтобы получить текст

Я хочу сделать так, чтобы, если пользователь нажимает на любую кнопку, просто получал текст только этой кнопки

Комментарии:

1. $(this).text() ??

Ответ №1:

Используйте this ключевое слово вместо определенного селектора в оповещении, чтобы получить текст нажатой кнопки

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

Это всегда будет выдавать текст кнопки с идентификатором 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>

Ответ №2:

Вы можете сделать это, добавив this jQuery в свой код. Вот рабочий фрагмент:

 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>