Question

我知道这种情况的变化已被问过几百次，但在搜索和阅读之后，几十个类似的问题特别厚，我无法接近解决它发生的原因和方法，所以有风险在火焰中被击落......

对它进行故障排除我将所有内容修剪为最基本的，所以我得到了一个表单的html

<li class='field' id='field_2'>

如果我放下一个jquery函数

$('.field').on('mouseenter',function(){console.log(this.id)});

它返回id很好，但如果我声明并调用诸如

之类的函数

function shade(){
    console.log(this.id);
};

$('.field').on('mouseenter',function(){shade()});

它返回'undefined'。

还在shade（）中尝试将id作为'var'传递，使用.attr（）等等，以防它无济于事。

在我放弃之前，任何人都可以指出我做错了什么'傻瓜'并且宣布将id作为mouseenter中的全局变量将非常感激。

谢谢！

Answer 1

您应该使用call()

＆＃13;

function shade(){
    console.log(this.id);
};

$('.field').on(
    'mouseenter', 
    function(){
        shade.call(this)
    }
);

＆＃13;

<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>

＆＃13;

Answer 2

我发现一个大问题：this似乎是jQuery中的当前项目。这是两个解决方案：

1-您可以设置this var： var this = $（'。field'）; this.on（ '的mouseenter'，函数（）{的console.log（this.id）}）;

2-如果你想在jQuery中使用当前的DOM cibling项，请不要使用$(this)，而是使用$代替= [[String:AnyObject]]()。

Answer 3

<强>的jQuery ：这样做的原因是当你使用jQuery时你使用一个将它设置为事件而不是DOM元素的函数。

请参阅以下输出：

＆＃13;

function shade(){
    console.log(this);
};

$('.field').on('mouseenter',function(){shade()});

＆＃13;

<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 -->

＆＃13;

您需要使用传统的JavaScript作为解决方法。

＆＃13;

function myId(el){
 console.log (el.id);
}

＆＃13;

.area{ width: 50%; height: 5em; background: lime; margin: 0 auto}

＆＃13;

<div class="area" id="greenbox" onmouseover="myId(this)"></div>

＆＃13;

或者像其他人建议的那样参考课程项目（我不会将其添加到我的答案中，因为我觉得其他人应该因为你提供解决方案而受到赞扬）

在声明的函数内部，This.id返回undefined

3 个答案: