这个jQuery脚本有什么问题？

Question

这个jQuery脚本有什么问题？

3

我正在尝试应用一个基本的“点击显示/隐藏”元素，但出于某种原因它没有生效。

我通过外部JavaScript文件使用它，并包含了最新的jQuery库，两者都包含在我的主页面中。Firebug显示代码，所以我知道它正在被引用。

下面是我尝试过的代码：

$(document).ready(function () {
// hides the divx as soon as the DOM is ready
$('#ecom').hide();
// shows the div on clicking the noted link  
$('.eco').click(function () {
    $('#ecom').show('slow');
    return false;
});
// hides the div on clicking the noted link  
$('.eco').click(function () {
    $('#ecom').hide('fast');
    return false;
}); 
});

html

<h2 class="eco">Ecommerce Web Design</h2>
<div id="ecom">content</div>

我自己看不出问题来。 最终我使用了这个解决方案，它可以做到我想要的：)也谢谢大家提供的答案。

$(document).ready(function () {
$('#ecom').hide();
$('.eco').click(function () {
    $('#ecom').toggle('slow');
    return false;
});

- sam

2个回答

3

您可以使用toggle而不是手动完成整个过程，但这只是一种快捷方式。如果您想学习这些内容，我建议您从头开始创建它，并且只在您完全理解背后的原理时使用快捷方式。

$(document).ready(function(){
    // Hide ``#ecom`` on page load.
    $('#ecom').hide();
    // Attach only one click handler (yours was attaching a handler that showed
    // the div and then on that hid the div, so it was always shown, and then
    // hidden instantly, therefore canceling your intended effect.
    $('.eco').click(function(e){
        // ``preventDefault()`` is the W3 correct way to stop event propagation
        // and works cross-browser. It's a bound method on all DOM events.
        // Notice I've given my click handler function an argument ``e``. When
        // you register an event handler function, the event that causes the
        // handler function to be called is provided as the first argument handler
        // function, thus giving us ``e`` as a local reference to the event.
        e.preventDefault();
        // Use ``is()`` to compare the element against the ``:hidden`` selector.
        // This will tell us if it's hidden or not.
        if($('#ecom').is(':hidden'))
        {
            $('#ecom').show('slow');
        } else {
            $('#ecom').hide('fast');
        }
    });
});

- orokusaki

不难想象.toggle()的作用。显然，OP已经知道.show()和.hide()，因为它们在问题中提到了。所以我认为可以安全地继续进行。此外，在处理程序中进行重复的DOM选择是一种不好的做法。 - user113716

@patrick dw - 我调用 $('#ecom') 两次是为了让代码更清晰。在编程中，优化通常是最后考虑的，特别是当你正在学习时。顺便说一下，你函数参数中的三元运算符使你的代码非常难懂。这是不好的实践。 - orokusaki

三元运算符==晦涩难懂==不良实践？它是一个条件运算符。 - user113716

@patrick dw - 几乎任何经过速度和大小优化的东西（如jQuery的源代码）都相当神秘。当YUI压缩时，jQuery可能同样容易阅读 :) 三元运算符通常不是坏的实践，但在主控制流中将其用作函数参数，特别是在教授某人时，这是不好的实践。 - orokusaki

@patrick dw - 现在你让我因为太简洁而感到难过了，哈哈 :) 顺便说一下，在我发布答案之前是我给你点了踩。不过在你修改答案并添加更多内容后，我把它移除了。 - orokusaki

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user113716 · Accepted Answer

两个处理程序将同时触发。

我认为你正在寻找.toggle()：

示例： http://jsfiddle.net/patrick_dw/uuJPc/

$('.eco').toggle(function () {
    $('#ecom').show('slow');
    return false;
},function () {
    $('#ecom').hide('fast');
    return false;
});

现在它将在点击之间交替显示。

编辑：如果您按照下面@Tgr提到的方式使用.toggle()，则需要一些方法来区分您代码中的"slow"/"fast"。

以下是一种方法： 示例：http://jsfiddle.net/patrick_dw/uuJPc/1/

$('#ecom').hide();
$('.eco').click(function () {
    var i = 0;
    return function() {
        $('#ecom').toggle(i++ % 2 ? 'slow' : 'fast');
        return false;
    };
}());

这是一个例子：http://jsfiddle.net/patrick_dw/uuJPc/2/ 或者像这样：

$('#ecom').hide();
$('.eco').click(function () {
    var ec = $('#ecom');
    ec.toggle(ec.is(':visible') ? 'slow' : 'fast');
    return false;
});