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而没有上下文（因此它获取默认值） window）的上下文。

我更喜欢第二种方法

唐＆＃39;吨。在HTML中嵌入JS并使用全局变量是我们在90年代做事的方式。 separate concerns更加清晰，并将代码打包到狭窄的范围内以避免冲突。

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

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

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

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

Answer 2

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

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

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

Answer 3

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

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

onchange="centerNumber.call(this)"

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

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

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

Answer 4

如果您使用＆＃39;这个＆＃39;来调用centerNumber（）方法。作为一个参数然后这将工作。如，

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

Answer 5

很多好建议。你也可以在没有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的问题和答案。在内联听众变得头疼之前不会花很长时间，但对于一个简单的网站，它们就可以了。

一种方法的JavaScript方法不起作用

5 个答案: