jquery代码在chrome中不起作用答案

【问题标题】：jquery code not working in chromejquery代码在chrome中不起作用
【发布时间】：2010-05-28 00:40:15
【问题描述】：

此代码适用于 FF 和 IE，但不适用于 Chrome。任何帮助将不胜感激。谢谢你！意识到此代码本身可以正常工作，但是当它托管在此页面 (http://www.automotive-fleet.com) 上时，它在 Chrome 和 Safari 中不起作用。我不知道为什么。任何帮助，将不胜感激。

这里是html

<div id="popularsearches">
<div id="popularsearches-inside">
    <div id="popularsearches-left">
                <ul>
                <li>Item One </li>
                <li>Item Two </li>
                <li>Item Three </li>
                <li>Item Four </li>
                <li>Item Five</a> </li>
                </ul>
    </div>
    <div id="popularsearches-right">
                <ul>
                <li>Item Six </li>
                <li>Item Seven </li>
                <li>Item Eight </li>
                <li>Item Nine </li>
                <li>Item ten </li>
                </ul>
    </div>
</div>
</div>

这是css

#popularsearches
{
    border-bottom: 1px solid #D4D4D4;
    border-left: 1px solid #D4D4D4;
    border-right: 1px solid #D4D4D4;
    overflow:hidden;    
    height: 130px;    width:248px;
   margin-bottom:20px;
}

#popularsearches ul
{
    padding:0 5px 0 0;
    margin:0;
}

#popularsearches ul li
{
    list-style-type:none;
    list-style-position:inside;
    border-bottom: solid 1px #D4D4D4;
    font-size:14px;
    padding:3px 0 3px 0;
    margin:0 0 0 10px;
    text-align:left;
}

#popularsearches ul li a
{
    text-decoration:none;
}

#popularsearches ul li a:hover, a:link, a:visited
{
    text-decoration:none;
}

#popularsearches-inside
{
    width: 500px;
}

#popularsearches-left
{       
    float:left;
    width:250px;
    height:100px;
}

#popularsearches-right
{       
    float:left;
    width:250px;
    height:100px;
}

这里是 jQuery

    var closeinterval = 0;

    function scrollContent() {
        //Toggle left between 250 and 0
        var top = jQuery("#popularsearches").scrollLeft() == 0 ? 250 : 0;            
        jQuery("#popularsearches").animate({ scrollLeft: top }, "slow");
    }

    // Call scrollContent function every 6 secs
    closeinterval = setInterval("scrollContent()", 6000);

    jQuery(document).ready(function() {
        jQuery("#popular-button-left").bind("click", function() {
            if (closeinterval) {
                window.clearInterval(closeinterval);
                closeinterval = null;
            }

            jQuery("#popularsearches").animate({ scrollLeft: 0 }, 1000);
        });
        jQuery("#popular-button-right").bind("click", function() {
            if (closeinterval) {
                window.clearInterval(closeinterval)
                closeinterval = null;
            }

            jQuery("#popularsearches").animate({ scrollLeft: 250 }, 1000);                
        });
    });

【问题讨论】：

Paul，我不想刻薄，但您能在 JavaScript 块中添加一些格式吗？ :P 编辑：nvm，尼克已经做到了。
这是托管在任何地方吗？这将使查找问题变得更加容易。
为我在 Chrome 上工作 - jsfiddle.net/bZ9c9
仍然无法在 Chrome 中运行。我相信你只是不知道我错过了什么。顺便说一句，什么版本的 Chrome？
@Paul - 我在 OSX 上，Chrome 在 5.0.375.55。顺便说一句，如果它不适用于您的 Chrome，我相信控制台日志中必须有一些迹象表明原因。

标签： jquery google-chrome

【解决方案1】：

改变这一行：

closeinterval = setInterval("scrollContent()", 6000);

到这里：

closeinterval = setInterval(scrollContent, 6000);

这为我解决了这个问题.. 参见示例 here

【讨论】：

@Matt - setInerval 采用 Javascript 表达式，因此 setInterval("scrollContent()", 6000) 有效。它不起作用的原因是因为您在 jsfiddle 上的代码被包装在 onLoad 回调函数中，并且函数 scrollContent 在它之外不存在。但是，当您简单地将函数传递给setInterval 时，它直接引用了该函数，因此范围无关紧要。将左上角的 onLoad 设置更改为 No wrap，OP 的代码应该可以正常工作。
@Anurag - 我想知道为什么 Matt 不使用 "scrollContent()" 而你的却是，直到我第一次注意到 No wrap 选项。正要发表评论，但你覆盖了它。 :)
实际上，这让我感觉好多了，因为我只是因为讨厌 eval 而删除它。我完全惊讶于它的改变，但是，嗯，我想我太愿意接受神秘了；）
很抱歉 jquery 代码的格式不好。我尝试从 setInterval() 函数的“scrollContent()”中删除引号，但它在 Chrome 中仍然不起作用。虽然适用于 IE 和 FF。感谢您的输入。非常感谢！
@Paul 我正在使用 Chrome，它运行良好.. 您在控制台中遇到任何错误吗？事实上，正如上面的 cmets 所指出的，您的代码（没有更改）确实有效。见here。

【解决方案2】：

可能是以下 div 中的不确定标记吗？

<div id="popularsearches-left">
            <ul>
            <li>Item One </li>
            <li>Item Two </li>
            <li>Item Three </li>
            <li>Item Four </li>
            <li>Item Five</a> <-- renegade closing tag</li>
            </ul>
</div>

【讨论】：