文章/答案/技术大牛

发布

社区首页 >问答首页 >Chrome bug还是jQuery bug？

问Chrome bug还是jQuery bug？
EN

Stack Overflow用户

提问于 2012-11-29 23:47:17

回答 1查看 2.5K关注 0票数 4

为什么下面的代码在IE 7和FF 15.0.1上可以按预期执行(根据选择调整下拉列表的大小)，但在Chrome 23.0.1271.91上总是以1结束？

我尝试添加console.log并实际看到发生了什么，似乎调整大小函数在Chrome中触发了两次，但作为jQuery的新手，我还不确定我是否完全理解传递对象。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>

  <script type="text/javascript" src="jquery-1.8.3.min.js"></script>          
  <script type="text/javascript">                                         

   var vt = new Array('1','2','3','4','5');
   var x = 1;

   function addopts(ddl) {
       console.log(ddl);
       for ( var i = 0; i < vt.length; i++ ) {
           var v = i * x;
           $(ddl).append("<option value='" + v + "'>" + v + "</option>");
       }
       console.debug(ddl);

       vt.push(x);
       x++; // our list changes
   }

   function resize(ddl) {

       console.log(ddl);

       ddl.size = $(ddl).val();
       $(ddl).empty();  // in case our list needs to change completely
       console.log(ddl);

       addopts(ddl);
       console.log(ddl);
   }

    jQuery(document).ready(function() {   
        console.log(this);
        $('#group').change(function() {
            console.log(this);
            resize(this);
        });
    });

  </script>                                                               

  </head>
  <body>
    <form>
     <select id='group' size='1'>
      <option value='1'>1</option>
      <option value='2'>2</option>
      <option value='3'>3</option>
      <option value='4'>4</option>
      <option value='5'>5</option>
     </select>
    </form>
  </body>
</html>

↪View this code at JSFiddle

任何有见地的人都很欣赏。

jquery

google-chrome

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-11-30 00:38:42

这似乎确实是Chrome在两个方面的问题。经过多次测试，我在Chrome23和24的中发现了以下问题

jQuery的.change && .on("change“以及 JavaScripts .onchange函数确实只在chrome
- 中触发两次)我对此没有答案，不过我已经找到了一种解决方法，我将在chrome上发布

Chrome似乎没有可用于呈现选择框的奇数大小。

- Chrome appears to resize to the nearest even number ( i think i noted it rounds up ) in order to re-render the select box.
- _**UPDATE**_ Further testing has shown (at least in ver 24) that this rendering to even numbers only issue, ONLY applies to sizes 0 through 4!

我提到的解决方法很简单，只需抛出一个计时器，以便将select设置为一个新实例，从而取消双重触发。请原谅我的术语sux，重点是，它有助于chrome在更改时只触发一次，并且不会影响其他浏览器(据我所知)

我还冒失地重写了你的代码，只是为了让我更容易阅读(你的代码看起来有点“扩展”)

Example jsFiddle

我使用的

Script

var vt = new Array('1','2','3','4','5'),
    x = 1;

//  Since jQuery 1.1+ (i think) you no longer need the long written `$(document).ready`.
//  Now you can do the same thing with the short-hand below
$(function() {
    //  The selector you get. The .on() function is relativly new to jQuery and simply provides an easy way to bind events to elements
    //  You can also use .off to unbind a function to an element, for instance, i could wrap the inner function in a func named `reSize`
    //      and then add it and remove it with:
    //          - To add event: $("#group").on("change", reSize)
    //          - To remove event: $("#group").off("change", reSize)
    $("#group").on("change", function(e) {
        //  I create a variable of $(this) simply to pass it to the Timer function
        var $this = $(this);
        setTimeout(function() { //  basic JavaScript here
            //  Prop is also kind of new to jQuery. You used to just use `.attr()`, but now jQuery distinguishes between Attributes and Properties
            //  Since "size" is a Property of the select element, I use .prop to get/set the value
            //      In this case I'm of course setting the size to the current value
            //  One nice feature of jQuery you'll see here is "chaining"
            //      as you notice, i added the `.empty` to the end, since each jquery function generally returns the element object you started with
            //          Of course, had I only been GETting the value of size, this would not be the case
            $this.prop("size", $this.val()).empty();
            for (i=0;i<vt.length;i++) { //  basic JavaScript here
                var v = i*x;    //  your initial setup
                //  Here I replaced the append function you had with much more readable code.
                //  There are several ways to do this in jQuery, however
                //      fragmented Strings are not ever really suggested
                //  This could have also been written:
                //      $this.append($("<option />", { text: v, value: v }));
                $this.append($("<option />").val(v).text(v));
            }
            vt.push(x); //  more basic JavaScript
            x++;
            //      The following was used for debugging on the fiddle
            console.log(x)
            $("#selectSize").text($this.prop("size"));
        });
    });
})

一些有用的**jQuery**链接

StackOverflow's NFO on jQuery (很多好的examples)
.ready()
.on()，.off()
.prop()，.attr()
.append()

，只是为了帮助你。如果你想把它放在一个独立的函数中，下面的内容和上面的完全一样，除了这个函数是独立的，因此适用于任何select。

var vt = new Array('1','2','3','4','5'),
    x = 1;

function reSizeSelect(e) {
    var $this = $(this);
    setTimeout(function() {
        $this.prop("size", $this.val()).empty();
        for (i=0;i<vt.length;i++) {
            var v = i*x;
            $this.append($("<option />").val(v).text(v));
        }
        vt.push(x);
        x++;
        console.log(x)
        $("#selectSize").text($this.prop("size"));
    });
}

$(function() {
    $("#group").on("change", reSizeSelect);
})

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13629434

复制

相似问题

问Chrome bug还是jQuery bug？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Chrome bug还是jQuery bug？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Chrome bug还是jQuery bug？
EN