У меня есть функция, которую я хотел бы применить к разным элементам - или, скорее, к разным селекторам, создающим разные контексты. Как я могу изменить приведенную ниже функцию для использования this вместо указания селектора $('#themes') внутри функции getClass?

Код:

$('#themes').change(function(e) {
  getClass(this, e); 
});

function getClass() {
  var classToAdd = $('#themes').find('option[value]:selected').map(function() {
    return this.value;
  }).get().join(' ');
  var allClassess = $('#themes').find('option[value]').map(function() {
    return this.value ? this.value : null;
  }).get().join(' ');
  $('#result').removeClass(allClassess).addClass(classToAdd);
}

См. скрипку здесь.

1
Meek 6 Сен 2016 в 22:28

4 ответа

Лучший ответ

Событие имеет свойство currentTarget, это именно то, что вы ищете, и нет необходимости передавать ему this ... на самом деле, просто перенастройте привязку следующим образом:

$('#themes').on('change', getClass);

function getClass (event) {
  var themes = $(event.currentTarget);
  var classToAdd = themes.find('option[value]:selected').map(function() {
    return this.value;
  }).get().join(' ');

  var allClassess = themes.find('option[value]').map(function() {
    return this.value ? this.value : null;
  }).get().join(' ');

  $('#result').removeClass(allClassess).addClass(classToAdd);
}
1
Charles 7 Сен 2016 в 12:06

Используйте $(this) вместо this.
Таким образом, вам не нужно определять один и тот же jQuery-селектор.

0
Thielicious 6 Сен 2016 в 19:44

Оператор this имеет отношение к области видимости и к текущему объекту, над которым вы работаете. Если в настоящее время не выбран ни один объект, то «this» будет ссылаться на «документ», также известный как вся веб-страница. Вы можете назначить новую переменную переданному селектору, это довольно простой способ выполнить то, что вы делаете:

('#themes').change(function(event) {
  getClass(this, event);
});

function getClass(elem, e) { //if you pass args into a func, you need to declare them in the prototype
  //elem now represents whatever object you passed it (in this case 'this')
  var classToAdd = elem.find('option[value]:selected').map(function() {
    return this.value;
  }).get().join(' ');
  var allClassess = elem.find('option[value]').map(function() {
    return this.value ? this.value : null;
  }).get().join(' ');
  $('#result').removeClass(allClassess).addClass(classToAdd);
}

Другой вариант - использовать метод или плагин jQuery, но этот синтаксис немного сложнее, чем эта функция. Разберитесь, как эта функция принимает объект как переменную, прежде чем переходить к методам и плагинам.

Я надеюсь, что это поможет!

1
Turk 6 Сен 2016 в 19:50

Важно понимать разницу между $(this) и this

$(this) - это объект jQuery, содержащий this, поэтому вы должны использовать $(this) всякий раз, когда хотите запускать какие-либо функции jQuery.

this - это объект Javascript, поэтому любые функции Javascript, которые вы хотите использовать, следует использовать на this.

Более того, при использовании this, что это такое, зависит от того, как вызывается функция. Вам не нужно передавать this и e в функцию getClass. Простой $('#themes').change(getClass); выполнит эту функцию при изменении #themes, а ваше ключевое слово this в вашей функции getClass будет объектом выбора, который является #themes, а $(this) будет вашим объектом jQuery, содержащим this.

Так что вместо этого вы можете просто использовать $(this).find(':selected') и все будет хорошо. Однако имейте в виду, что ваше ключевое слово this внутри вашей функции map относится к объекту, на котором вы запускаете функцию map (он же $(this).find(':selected'))

0
Adjit 6 Сен 2016 в 19:58