JavaScript 方法中，一种有效，另一种无效

Question

为什么会这样？

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type="text/javascript" >
$( document ).ready(function() {
$('#listF').on('change', function(){
    var n = this.getAttribute('size'),
        i = this.selectedIndex,
        l = this.options.length;
    this.selectedIndex = Math.min(l-1,i+n/2|0);
    this.selectedIndex = Math.max(0,i+1-n/2|0);
    this.selectedIndex = i;
});
    });
</script>


<select name="" id="listF" size="5">
    <option value="01">001</option>
    <option value="02">002</option>
    <option value="03">003</option>
    <option value="04">004</option>
    <option value="05">005</option>
    <option value="06">006</option>
    <option value="07">007</option>
    <option value="08">008</option>
    <option value="09">009</option>
    <option value="10">010</option>
</select>

这不起作用？

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type="text/javascript" >
function centerNumber(){
    var n = 5,
        i = this.selectedIndex,
        l = this.options.length;
    this.selectedIndex = Math.min(l-1,i+n/2|0);
    this.selectedIndex = Math.max(0,i+1-n/2|0);
    this.selectedIndex = i;
}
</script>


<select name="" id="listF" size="5" onchange="centerNumber()">
    <option value="01">001</option>
    <option value="02">002</option>
    <option value="03">003</option>
    <option value="04">004</option>
    <option value="05">005</option>
    <option value="06">006</option>
    <option value="07">007</option>
    <option value="08">008</option>
    <option value="09">009</option>
    <option value="10">010</option>

我更喜欢第二种方法，因为它可以使用很多次，而不仅仅是一次。在第一种方法中，您必须在每次需要更改时复制/粘贴代码。第二种方法似乎更干净。

我的意思是它不起作用是它不居中。 JavaScript 似乎无法工作。

Answer 1

this 的值取决于函数的调用方式。

在第一个示例中，传递给 on 的匿名函数表达式是事件处理程序，因此当它被调用时，它位于元素的上下文中。

在第二个示例中，onchange 是事件处理程序(根本不使用 this)，它调用 centerNumber上下文(因此它获取窗口的默认上下文)。

<小时/>

I prefer the second method

不要。在 HTML 中嵌入 JS 并使用全局变量是我们在 90 年代所做的事情。 separate concerns 更干净并将代码打包到狭窄的范围内以避免冲突。

as it can be used plenty of times not just one. In the first method you must copy/paste the code at each time you need to change.

事实并非如此。只需先定义一个函数并重用它即可。

function someFunction (event) { 
    /* do stuff */ 
};

jQuery('.someElements').on('change', someFunction);
jQuery('#anElement').on('click', someFunction);