JavaScript 方法一个有效，另一个无效

JavaScript methods one works the other doesn't

本文关键字：有效 另一个 无效 一个 方法 JavaScript      更新时间：2023-09-26

为什么会这样？

<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似乎无法工作。

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

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

在第二个示例中，onchange 是事件处理程序（根本不使用 this），它调用没有上下文的centerNumber（因此它获得 window 的默认上下文）。

我更喜欢第二种方法

不要。在HTML中嵌入JS并使用全局变量是我们在90年代的做法。将关注点和代码打包到狭窄的范围内以避免冲突要干净得多。

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

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

function someFunction (event) { 
    /* do stuff */ 
};
jQuery('.someElements').on('change', someFunction);
jQuery('#anElement').on('click', someFunction);

您不应该使用第二种方法 - 内联 DOM0 事件处理程序容易出错且过时。 您遇到的具体问题是您没有将正确的this传递给居中函数。

一定要将处理程序放在一个单独的命名函数中，以便它可以在多个元素上重用（就像你在第二个代码中所做的那样），但你应该使用 jQuery 来注册它：

$('#listF').on('change', centerNumber);

第二个脚本不起作用，因为this不指向元素。

在事件处理程序中，this是元素，但随后调用函数，因此丢失了上下文。可以使用 call 方法指定函数的上下文：

onchange="centerNumber.call(this)"

您也可以将第一种方法用于多个元素，只需在选择器中指定它们即可。例：

$('#listA,#listB,#listC,#listD,#listE,#listF').on('change', function(){

使用类来定位元素可以使其更加容易，因为您可以在多个元素上设置相同的类。

如果你调用 centerNumber（） 方法以 'this' 作为参数，那么这将起作用。 例如，

<select name="" id="listF" size="5" onchange="centerNumber(this)">

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

很多好的建议。你也可以在没有jQuery（或任何库）的情况下做到这一点，一些选项：

  // Things that work in all browsers
  window.onload = function() {
    document.getElementById('listF').onchange = centerNumber;
  }
  // Place in a script element just before the closing body tag
  document.getElementById('listF').onchange = centerNumber;
  // Things that work in most, but not all, browsers
  // IE 8 and lower don't support addEventListener
  // There are plenty of cross-browser alternatives
  window.onload = function() {
    document.getElementById('listF').addEventListener('change', centerNumber, false);
  }

SO 上有很多关于附加事件侦听器的问题和答案。没过多久，内联听众就会变得头疼，但对于一个简单的网站来说，它们就很好了。

相关文章：