jQuery. Вывести текст, что находится в теге, в консоль

Question

Есть некий родительский блок div. В нем две кнопки с одинаковыми класами, но разные значения в data-*. В зависимости, на какую кнопку клацнули, нужно достать текст в самом теге(Fade out или же Fade in) и именно это вывести в консоль

Вот код

<!DOCTYPE html>
<html>
</head>
<body>
<p>This is a paragraph.</p>
<div class='div'>
<button class="btn1" data-bq="1">Fade out</button>
<button class="btn1" data-bq="2">Fade in</button>
</div>

</body>
</html>

jquery

    $(document).ready(function(){
      $(".div").click(function(evt){
      let targ = evt.target.dataset.bq
      console.log(targ)
  
      $("p").fadeOut();
    
      if(targ === "1"){
       $(".btn1").addClass("mytry")
       console.log($(".mytry").text())
      } else if (targ === "2") {
       $('.btn1').addClass("twe")
       console.log($(".twe").text())
      }   
    })
  });

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

Заранее благодарю за любую помощь

Answer 1

Делегирование события в обработчике .on(), где по триггеру по элементу [data-bq] выводим его текст, методом .text()

$('.div').on('click', '[data-bq]', function() { // Делегируем событие, при нажатии на какой-то элемент с атрибутом `data-bq` внутри элемента `.div`, запустим следующий код:
  console.info($(this).text()); // покажим текст нажатого элемента
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='div'>
  <button class="btn1" data-bq="1">Fade out</button>
  <button class="btn1" data-bq="2">Fade in</button>
</div>

БЛОГ НА HUSL

jQuery. Вывести текст, что находится в теге, в консоль

Ответы (1 шт):