Получать значения элементов одного класса

Мне нужно напечатать значение кнопки, нажатой внутри группы кнопок, как есть, предупреждение запускается для всех кнопок, но как мне узнать, какая кнопка была выбрана? ^ Есть ли умный способ узнать, какая кнопка была последней активной, и узнать ее значение?

window.onload = function(){

  $('#page-buttons').on('click', function() {
    alert('value of button clicked');
  });
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <meta charset = "utf-8">
  
    <div class = "wrapper">
      <div class = "container">

        <div class = "row">
          <div class = "col-sm-12">
            <h1> Python</h1>
            <p id = "cont">blabla</p>
          </div>
        </div>

        <div id = "page-content" class = "page-content">
          <div class = "btn-group" id = "page-buttons">
            <button type = "button" class = "btn btn-primary"  value = "first" >First</button>
            <button type = "button" class = "btn btn-primary"  value = "last" >Last</button>
          </div>
        </div>
      </div>
    </div>
</head>
</html>

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

javascript jquery html

13.10.2018 02:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

e.target представляет элемент, по которому щелкнули мышью, поэтому вы можете проверить .val() из e.target. Также обратите внимание, что повторяющиеся идентификаторы внутри одного документа - это неверный HTML - вместо этого используйте только классы.

$('#page-buttons').on('click', function(e) {
  console.info($(e.target).val());
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "wrapper">
  <div class = "container">
    <div class = "row">
      <div class = "col-sm-12">
        <h1> Python</h1>
        <p id = "cont">blabla</p>
      </div>
    </div>

    <div id = "page-content" class = "page-content">
      <div class = "btn-group" id = "page-buttons">
        <button type = "button" class = "btn btn-primary" value = "first">First</button>
        <button type = "button" class = "btn btn-primary" value = "last">Last</button>
      </div>
    </div>
  </div>
</div>

Другой способ - прикрепить слушателей к самим кнопкам, и в этом случае вы можете использовать this для ссылки на нажатую кнопку (элемент, к которому был прикреплен слушатель):

$('.btn').on('click', function() {
  console.info($(this).val());
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "wrapper">
  <div class = "container">
    <div class = "row">
      <div class = "col-sm-12">
        <h1> Python</h1>
        <p id = "cont">blabla</p>
      </div>
    </div>

    <div id = "page-content" class = "page-content">
      <div class = "btn-group" id = "page-buttons">
        <button type = "button" class = "btn btn-primary" value = "first">First</button>
        <button type = "button" class = "btn btn-primary" value = "last">Last</button>
      </div>
    </div>
  </div>
</div>

13.10.2018 02:05

Другие вопросы по теме

В ожидании метода Angular 5

Как очистить определенный объект JSON в массиве JSON в localStorage с помощью кнопки удаления?

Доступная проверка формы

SumoSelect отклоняющий массив

Мне нужно открыть DIV как аккордеон, используя JQuery и Vue.js

Два видео с двумя модальными окнами

Как навести курсор на элемент ввода полосы

Как скрыть div, если он не содержит значения с помощью jquery

Удалить повторяющиеся значения в столбце

Использование sweetalert2 с настраиваемым селектором обратного вызова / jquery

Получать значения элементов одного класса

Ответы 1

Другие вопросы по теме

Похожие вопросы