Как выбрать «это» по клику? - PullRequest
Новая
       19

Как выбрать «это» по клику?

0 голосов
/ 18 марта 2020

Вызывая событие onClick, я хотел бы выбрать тот же элемент, к которому присоединено событие onClick, чтобы добавить класс к тому же элементу. Я попробовал следующее: 

<div class="class1" onClick="TestFunction();">Click</div>
<script>
  function TestFunction() {
    $(this).addClass('active');
  }
</script>

После нажатия на div класс «активный» должен быть добавлен к тому же элементу, что приведет к ... 

<div class="class1 active" onClick="TestFunction();">Click</div>

Однако это не работает Мне интересно, работает ли селектор this по-другому в этом случае.

Структура элемента div должна оставаться прежней, а функция должна оставаться в том же месте, что и в атрибуте onClick.

Ответы [ 2 ]

2 голосов
/ 18 марта 2020

Причина: this относится к глобальному окну объекту внутри функции.

Вы необходимо передать this в функцию, чтобы вы могли ссылаться на нее внутри функции: 

.active{
  color:green;
  font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1" onClick="TestFunction(this);">Click</div>

<script>
function TestFunction(el) {
  console.log(this.constructor.name) //Window
  $(el).addClass('active');
}
</script>

Хотя лучше избегать встроенного обработчика событий: 

$('.class1').click(function(){
  $(this).addClass('active');
});
.active{
  color:green;
  font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1">Click</div>
0 голосов
/ 18 марта 2020

При использовании встроенного обработчика вызываемая функция выполняется в области действия элемента window, а не элемента, вызвавшего событие. Чтобы обойти это, вы можете передать this в качестве аргумента: 

<div class="class1" onClick="TestFunction(this);">Click</div>

function TestFunction(el) {
  el.addClass('active');
}

Однако это не очень хорошая практика. Встроенные атрибуты событий устарели и теперь считаются плохой практикой. Лучший способ добиться этого - подключить ненавязчивые обработчики событий. В простом JS это будет выглядеть так: 

<div class="class1">Click</div>

document.querySelectorAll('.class1').forEach(el => {
  el.addEventListener('click', function() {
    this.classList.add('active');
  });
});

В jQuery это будет выглядеть так: 

<div class="class1">Click</div>

jQuery($ => {
  $('.class1').on('click', function() {
    $(this).addClass('active');
  });
});
...