This.id возвращает undefined внутри объявленной функции
Я знаю, что варианты этого задавались сотни раз, но после поиска и чтения десятков похожих вопросов я стал особенно толстым, и я не могу приблизиться к выяснению того, почему и как это происходит, поэтому рискую быть застреленным вниз в огне ...
Устранение неполадок я сократил все до самого простого, поэтому у меня есть html формы
<li class='field' id='field_2'>
если я запишу функцию jquery как
$('.field').on('mouseenter',function(){console.info(this.id)});
он возвращает идентификатор в порядке, но если я объявляю и вызываю такую функцию, как
function shade(){
console.info(this.id);
};
$('.field').on('mouseenter',function(){shade()});
он возвращает undefined.
Также пробовал в shade () передавать идентификатор как 'var', используя .attr () и т.д., если это не помогло.
Любой может указать мне, что я делаю не так, «для чайников», прежде чем я просто сдамся и объявлю идентификатор как глобальную переменную в центре мыши, будет очень признателен.
Спасибо!
$('.field').on('mouseenter', shade); - передать ссылку на функцию вместо ее вызова из анонимной функции
Потому что это выходит за рамки функции.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы должны использовать вызов()
function shade(){
console.info(this.id);
};
$('.field').on(
'mouseenter',
function(){
shade.call(this)
}
);<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class='field' id='field_2'>hover me</li>Да, это и предложение от datacure ниже работают, спасибо. Просто пытаюсь понять, почему сейчас, поскольку я уверен, что раньше использовал ту же «структуру» без этой проблемы. Думаю, пора надеть мою мыслящую шляпу. Ваше здоровье.
@OLopez добавить console.info(this); в обе функции. Зарегистрируйте его с .call(this) и без него и обратите внимание на разницу. Это может помочь вашей мыслящей шляпе прояснить некоторые вещи.
Я вижу большую проблему: this кажется текущим элементом в jQuery. Вот 2 решения:
1- Вы можете установить переменную this:
var this = $ ('. field');
this.on ('mouseenter', функция () {console.info (this.id)});
2- если вы хотите использовать текущий элемент cibling DOM в jQuery, не используйте this, а вместо этого используйте $(this) с $.
var this приведет к следующему исключению: Uncaught SyntaxError: Неожиданный токен this. Вы не можете использовать зарезервированные ключевые слова в качестве имени переменной
Вы можете называть это как хотите, это просто пример ^^
jQuery: Причина этого в том, что при использовании jQuery вы используете функцию, которая настраивает this как событие, а не как элемент DOM.
См. Следующий вывод:
function shade(){
console.info(this);
};
$('.field').on('mouseenter',function(){shade()});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class='field' id='field_2'>
<!-- You may have to wait a short while after you hover over the bullet point -->Вам нужно будет использовать традиционный JavaScript в качестве обходного пути.
function myId(el){
console.info (el.id);
}.area{ width: 50%; height: 5em; background: lime; margin: 0 auto}<div class = "area" id = "greenbox" onmouseover = "myId(this)"></div>Или обратитесь к элементу класса, как предлагали другие (я не буду добавлять это к своему ответу, поскольку считаю, что другим следует отдать должное за то, что они предоставили вам решение)
Спасибо, поскольку я ответил Карамбе выше, и ваш, и его метод работают, поэтому мне нужно немного подумать, чтобы понять, почему. Большое спасибо
P.s. Кажется, мне разрешено проголосовать и отметить в качестве ответа только одного из вас, чтобы не выбирать, я оставил их карамбе на основании того, что я первый. Извини ;-)
Это вполне приемлемо, спасибо, что нашли время поделиться своими мыслями :)
Предоставьте рабочий фрагмент кода, воспроизводящий описанную проблему.