Jquery нажмите несколько идентификаторов и получить значение - PullRequest
Новая
       23

Jquery нажмите несколько идентификаторов и получить значение

0 голосов
/ 13 мая 2018

Я пытаюсь получить значение элемента, когда пользователь нажимает на него. Это мой код: 

<div id="heroes-selection" class="row dflex justify-content-left">
    <figure id="luna" class="heroes-pic border text-danger m-3" value="heroes.luna">
      <img class="animated-gif">
   </figure>

   <figure id="qop" class="heroes-pic border text-danger m-3" value="heroes.qop">
      <img class="animated-gif">
   </figure>
</div>

Я пытался использовать Jquery $(this), и результат получился как undefined. 

$(".heroes-pic").on("click", () => {
  player = $(this).attr("value");
  console.log(player);
});

Моя цель - получить значение heroes.luna, когда пользователь нажимает на цифру с id="luna". То же самое для id="qop", мне нужно получить значение heroes.qop. Спасибо!

Ответы [ 3 ]

0 голосов
/ 13 мая 2018

Вы должны использовать классическую функцию вместо функции стрелки.Функция this on arrow относится к HTMLDocument и объекту, по которому щелкнули.И это причина, почему вы не получаете правильный результат.Вы получаете значение атрибута от HTMLDocument. 

$(".heroes-pic").on("click", function() {
  player = $(this).attr("value");
  console.log(player);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="heroes-selection" class="row dflex justify-content-left">
  <figure id="luna" class="heroes-pic border text-danger m-3" value="heroes.luna"> heroes.luna
    <img class="animated-gif">
  </figure>

  <figure id="qop" class="heroes-pic border text-danger m-3" value="heroes.qop"> heroes.qop
    <img class="animated-gif">
  </figure>

</div>

Другая опция: Вы можете использовать event.currentTarget вместо this для функции стрелки

Нравится: 

$(".heroes-pic").on("click", (event) => {
  player = $(event.currentTarget).attr("value");
  console.log(player);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="heroes-selection" class="row dflex justify-content-left">
  <figure id="luna" class="heroes-pic border text-danger m-3" value="heroes.luna">
    <img class="animated-gif">heroes.luna
  </figure>

  <figure id="qop" class="heroes-pic border text-danger m-3" value="heroes.qop">
    <img class="animated-gif">heroes.qop
  </figure>

</div>
0 голосов
/ 13 мая 2018

Не используйте this, чтобы получить доступ к выбранному элементу, используйте event.currentTarget 

$(".heroes-pic").on("click", (e) => {
  var $this = $(e.currentTarget);
  player = $this.attr("value");
  console.log(player);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="heroes-selection" class="row dflex justify-content-left">
  <figure id="luna" class="heroes-pic border text-danger m-3" value="heroes.luna">1
    <img class="animated-gif">
  </figure>

  <figure id="qop" class="heroes-pic border text-danger m-3" value="heroes.qop">2
    <img class="animated-gif">
  </figure>

</div>
0 голосов
/ 13 мая 2018

Это потому, что вы используете функцию стрелки, которая связывает параметр this с включенной областью действия this.

См. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this

замените его на функцию: 

$(".heroes-pic").on("click", function () {
  player = $(this).attr("value");
  console.log(player);
}
...