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语句
使用"#...hidden"代表的this_hidden元素来确定"div.outer"
只是.hide()其他两个"#...hidden"元素没有if，不包括使用not()^[docs]方法切换的元素。
< / LI>

编辑：替换了动画"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/

的内容

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

4 个答案: