尝试使用变量来缩短我的 jquery

Question

我正在尝试使用变量来缩短以下代码（有效）。这似乎很多余，所以是的。

<script type="text/javascript">
$(document).ready(function(){
    $("div.first").click(function()
    {
        if ($('#firsthidden').css('display') == "block")
        {
            $("#firsthidden").hide("blind", "slow");
            $("div.outer").animate({height:200},"slow");
        }
        else
        {
            $("#firsthidden").show("blind", "slow");
            $("div.outer").animate({height:390},"slow");
        }
        if ($('#secondhidden').css('display') == "block")
        {
            $("#secondhidden").hide("blind", "slow");
        }
        if ($('#thirdhidden').css('display') == "block")
        {
            $("#thirdhidden").hide("blind", "slow");
        }
    });
    $("div.second").click(function()
    {
        if ($('#secondhidden').css('display') == "block")
        {
            $("#secondhidden").hide("blind", "slow");
            $("div.outer").animate({height:200},"slow");
        }
        else
        {
            $("#secondhidden").show("blind", "slow");
            $("div.outer").animate({height:390},"slow");
        }
        if ($('#firsthidden').css('display') == "block")
        {
            $("#firsthidden").hide("blind", "slow");
        }
        if ($('#thirdhidden').css('display') == "block")
        {
            $("#thirdhidden").hide("blind", "slow");
        }
    });
    $("div.third").click(function()
    {
        if ($('#thirdhidden').css('display') == "block")
        {
            $("#thirdhidden").hide("blind", "slow");
            $("div.outer").animate({height:200},"slow");
        }
        else
        {
            $("#thirdhidden").show("blind", "slow");
            $("div.outer").animate({height:390},"slow");
        }
        if ($('#secondhidden').css('display') == "block")
        {
            $("#secondhidden").hide("blind", "slow");
        }
        if ($('#firsthidden').css('display') == "block")
        {
            $("#firsthidden").hide("blind", "slow");
        }
    });

});
</script>

所以我正在尝试使用变量来缩短它。我已经把代码逻辑写下来了，所以我猜这是一个语法/格式问题。这是我的尝试：

<script type="text/javascript">
var x = null;
var a = null;
var b = null;

$(document).ready(function(){
    $("#first").click(function()
    {
        x = $("#firsthidden");
        a = $("#secondhidden");
        b = $("#thirdhidden");
    });
    $("#second").click(function()
    {
        x = $("#secondhidden");
        a = $("#firsthidden");
        b = $("#thirdhidden");
    });
    $("#third").click(function()
    {
        x = $("#thirdhidden");
        a = $("#firsthidden");
        b = $("#secondhidden");
    });
    $("div.clicked").click(function()
    {
        if (x.css('display') == "block")
        {
            $(x.hide("blind", "slow");
            $("div.outer").animate({height:200},"slow");
        }
        else
        {
            x.show("blind", "slow");
            $("div.outer").animate({height:390},"slow");
        }
        if (a.css('display') == "block")
        {
            a.hide("blind", "slow");
        }
        if (b.css('display') == "block")
        {
            b.hide("blind", "slow");
        }
    });
});
</script>

Answer 1

您应该能够将所有代码简化为：

$(document).ready(function() {

    var all = $('#firsthidden, #secondhidden, #thirdhidden'),
        arr = ['div.first', 'div.second', 'div.third'];

    all.each(function(i) {
        var this_hidden = this;

        $(arr[i]).click(function() {
            var the_height = $(this_hidden).css('display') == 'block' ? 200 : 390;
            $(this_hidden).toggle("slow", "linear");
            $("div.outer").animate({height: the_height },"slow");
            all.not(this_hidden).hide("slow", "linear");
        });
    });

});

• 缓存'#firsthidden, #secondhidden, #thirdhidden'元素到all

• 创建一个选择器数组以获取点击处理程序'div.first', 'div.second', 'div.third'

• 使用toggle()^[docs] 方法来显示或隐藏"#...hidden" 元素(this_hidden) 而不是使用if 语句

• 使用由this_hidden 表示的"#...hidden" 元素来确定为"div.outer" 设置动画的适当高度

• 只需.hide() 其他两个"#...hidden" 元素，没有if，不包括使用not()^[docs] 方法切换的元素。

---

编辑：替换了动画"div.outer" 的缺失行。感谢@natedavisolds 指出。

编辑 2： 我的 hidden 元素选择器错误。我有$('#firsthidden', '#secondhidden', '#thirdhidden') 而不是$('#firsthidden, #secondhidden, #thirdhidden')。

另外，我从问题中复制了颠倒的"blind" 和"slow"。

固定。

编辑 3： 我设置 the_height 变量太晚了。将它向上移动了一行，使其在动画开始之前运行，并且可以正常工作。

为我没有测试我的代码而感到羞耻！！！

示例： http://jsfiddle.net/NnyGR/

Answer 2

 $("div.clicked").click(function()
    {
        if (x.css('display') == "block")
        {
            $(x.hide("blind", "slow");
            $("div.outer").animate({height:200},"slow");
        }

需要

 $("div.clicked").click(function()
    {
        if (x.css('display') == "block")
        {
            x.hide("blind", "slow");
            $("div.outer").animate({height:200},"slow");
        }

Answer 3

试试这个。

$(document).ready(function(){
    $("#first").click(function()
    {
        MyFunction($("#firsthidden"), $("#secondhidden"), $("#thirdhidden"));
    });
    $("#second").click(function()
    {
        MyFunction($("#secondhidden"), $("#firsthidden"), $("#thirdhidden"));
    });
    $("#third").click(function()
    {
        MyFunction($("#thirdhidden"), $("#secondhidden"), $("#firsthidden"));
    });
    function MyFunction(x, a, b)
    {
        if (x.css('display') == "block")
        {
            $(x.hide("blind", "slow");
            $("div.outer").animate({height:200},"slow");
        }
        else
        {
            x.show("blind", "slow");
            $("div.outer").animate({height:390},"slow");
        }
        if (a.css('display') == "block")
        {
            a.hide("blind", "slow");
        }
        if (b.css('display') == "block")
        {
            b.hide("blind", "slow");
        }
    });
});

Answer 4

如果您想要类似选项卡式内容的内容。有插件或者你可以自己写。可能类似于http://jsfiddle.net/XYGHQ/6/