Упростить jquery code

278

12 декабря 2016, 10:07

Здравствуйте помогите упростить этот код , сократить строки ,записать в одно функцию... благодарю за помощь :)

$(document).ready(function () {
    $("#hide-1").show();
    $("#hide-2").hide();
    $("#hide-3").hide();
    $("#hide-4").hide();
    $("#li-1").click(function () {
        $("#hide-1").show();
        $("#hide-2").hide();
        $("#hide-3").hide();
        $("#hide-4").hide();
    });
    $("#li-2").click(function () {
        $("#hide-2").show();
        $("#hide-1").hide();
        $("#hide-3").hide();
        $("#hide-4").hide();
    });
    $("#li-3").click(function () {
        $("#hide-3").show();
        $("#hide-2").hide();
        $("#hide-1").hide();
        $("#hide-4").hide();
    });
    $("#li-4").click(function () {
        $("#hide-4").show();
        $("#hide-2").hide();
        $("#hide-3").hide();
        $("#hide-1").hide();
    });
});

Answer 1

Тут не код упрощать нужно, а подход к решению задачи менять. Вот набросал вам пример, он не идеальный, но даст пищу для размышления - http://jsfiddle.net/3wbnqv8m/

Answer 2

По вашему коду, можно поступить так, вдруг менять не будете...
1. Всем #hide-1,#hide-2,#hide-N назначить класс hide-all
2. Клик ловим на самом элементе или же общем классе

$(document).ready(function () {
    $(".hide-all").hide();
    $("#hide-1").show();
    /// id: #li-1,#li-2,....#li-N
    $("li").click(function (){
        var id = this.id.replace(/[^0-9.]/g,"");
        $(".hide-all").hide();
        $("#hide-"+id).show();
    });
});

Ну и лучше же прислушаться к @andreyqin