Блог

Главная - Вопросы по программированию - Как мне настроить таргетинг на кнопку с помощью vanilla JS или Jquery, чтобы узнать, выбрал пользователь ее или нет?

Как мне настроить таргетинг на кнопку с помощью vanilla JS или Jquery, чтобы узнать, выбрал пользователь ее или нет?

#javascript #jquery

#javascript #jquery

Вопрос:

Это HTML-код для кнопок. У пользователя есть 3 варианта, и он может выбрать только один.

         <div data-role="fieldcontain">
          <fieldset data-role="controlgroup" data-type="horizontal">
              <legend>Camera Type:</legend>
              <button class="ui-shadow ui-button" id="btnDSLR">DSLR<span class="ui-icon ui-icon-home"></span></button>
              <button class="ui-shadow ui-button" id="btnPointAndShoot">Point amp; Shoot<span class="ui-icon ui-icon-home"></span></button>
              <button class="ui-shadow ui-button" id="btnNoCamara">No Camara<span class="ui-icon ui-icon-home"></span></button>
          </fieldset>
        </div>

Я думал, что это должно быть что-то вроде этого:

 //Check Camara Type.
    if (document.getElementById("btnDSLR").checked)
    {
      camara  = "DSRL";
    }

Я не знаю, как получить, какой вариант выбрал пользователь.

Спасибо!

Ответ №1:

Вот так.

jQuery:

 $(".ui-button").on("click",function(e) {
  const $tgt = $(this)
  console.log($tgt.attr("id"),$tgt.text());
})  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-role="fieldcontain">
  <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Camera Type:</legend>
    <button class="ui-shadow ui-button" id="btnDSLR">DSLR<span class="ui-icon ui-icon-home"></span></button>
    <button class="ui-shadow ui-button" id="btnPointAndShoot">Point amp; Shoot<span class="ui-icon ui-icon-home"></span></button>
    <button class="ui-shadow ui-button" id="btnNoCamara">No Camara<span class="ui-icon ui-icon-home"></span></button>
  </fieldset>
  <span id="which"></span>
</div>

Простой / ванильный JS нуждается в делегировании

 document.querySelector("fieldset[data-role=controlgroup]").addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.parentNode.classList.contains("ui-button")) tgt = tgt.parentNode; // clicked the span
  if (tgt.classList.contains("ui-button")) {
     console.log(tgt.id,tgt.textContent);
  }
})  
 <div data-role="fieldcontain">
  <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Camera Type:</legend>
    <button class="ui-shadow ui-button" id="btnDSLR">DSLR<span class="ui-icon ui-icon-home"></span></button>
    <button class="ui-shadow ui-button" id="btnPointAndShoot">Point amp; Shoot<span class="ui-icon ui-icon-home"></span></button>
    <button class="ui-shadow ui-button" id="btnNoCamara">No Camara<span class="ui-icon ui-icon-home"></span></button>
  </fieldset>
  <span id="which"></span>
</div>

Ответ №2:

Вы можете просто получить text of button, как показано ниже, используя jquery 

 $('.ui-button').click(function() {

  console.log( $(this).text() );
})  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-role="fieldcontain">
          <fieldset data-role="controlgroup" data-type="horizontal">
              <legend>Camera Type:</legend>
              <button class="ui-shadow ui-button" id="btnDSLR">DSLR<span class="ui-icon ui-icon-home"></span></button>
              <button class="ui-shadow ui-button" id="btnPointAndShoot">Point amp; Shoot<span class="ui-icon ui-icon-home"></span></button>
              <button class="ui-shadow ui-button" id="btnNoCamara">No Camara<span class="ui-icon ui-icon-home"></span></button>
          </fieldset>
        </div>