Попытка использовать переменные, чтобы сократить мой 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() ^{[документы]} , чтобы показать или скрыть элемент "#...hidden" (this_hidden) вместо использования if заявление

• используйте элемент "#...hidden", представленный this_hidden, чтобы определить правильную высоту для анимации "div.outer"

• просто .hide() два других элемента "#...hidden" без if, исключая тот, который переключается с помощью not() ^{[документы]} метод.

---

EDIT: Заменена недостающая строка, которая анимировала "div.outer". Спасибо @ natedavisolds за указание на это.

EDIT 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

Если вы собираетесь что-то вроде вкладок.Есть плагины или вы можете написать это самостоятельно.Может быть что-то вроде этого http://jsfiddle.net/XYGHQ/6/

Answer 4

Попробуйте это.

$(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");
        }
    });
});