Понимание jQuery $ (this) .closest (element); - PullRequest
Новая
       10

Понимание jQuery $ (this) .closest (element);

0 голосов
/ 14 сентября 2018

Я просто хотел бы знать, что означает $(this), когда вы используете его в функции, вызываемой кнопкой.

Это относится к элементу кнопки или к самой функции.

Пример кода: 

<div>
<span class="fileError"></span>
<input type="file" class="understanding" />
</div>

<script>
$('.understanding').click(function(){

   $(this).closest('div').find('span.fileError').html('My brain needs help');
});
</script>

Вещи, которые я пытался изменить html моего диапазона

$(this).prev('span.fileError').html();

$(this).closest('div').find('span.fileError').html();

$(this).closest('div').find('span.fileError').text();

Ссылки, которые я пробовал:

Jquery: найти поле ввода ближе к кнопке

Понимать javascripts 'this'с ясностью

Поиск ближайшего тега p к нажатой кнопке

Я посмотрел больше мест, думал, что я просто покажу те, которые я нашел наиболее информативными.Что мне нужно сделать здесь и на что $(this) ссылается в функции?

Ответы [ 2 ]

0 голосов
/ 14 сентября 2018

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

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

$('.understanding-arrow').click(() => {
  console.log(this === window && "this is window");

  $(this).closest('div').find('span.fileError').html('My brain needs help');
});
$('.understanding-normal').click(function() {
  console.log(this === $('.understanding-normal')[0] && "this is input el");

  $(this).closest('div').find('span.fileError').html('My brain needs help');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span class="fileError"></span>
  <input type="button" class="understanding-arrow" value="arrow function" />
</div>
<div>
  <span class="fileError"></span>
  <input type="button" class="understanding-normal" value="normal function" />
</div>
0 голосов
/ 14 сентября 2018

Это относится к элементу кнопки или к самой функции.

В функциях-обработчиках событий jQuery this относится к самому элементу DOM, а $(this) заключает его в объект jQuery.

Но реальный ответ на ваш вопрос о том, как изменить HTML-код вашего диапазона, будет зависеть от того, что такое fileupload.

...