Блог

Главная - Вопросы по программированию - Как упростить этот код jQuery?

Как упростить этот код jQuery?

#jquery #button #hide #show #simplify

#jquery #кнопка #скрыть #показать #упростить

Вопрос:

 <script>
$(document).ready(function () {
// for some reason the button hide has to be at the top
$("button").click(function () {
    $(".holcomb, .lunden, .maggie, .rosewood").hide("slow");
    $("button").hide("fast");
});
 // examples show hide
$(document).ready(function() {
    $("a#holcomb").click(function () {
       $(".holcomb, .lunden, .maggie, .rosewood").hide("fast");
       $("button").hide("fast")
       $(".holcomb").slideDown(1500);
       $("button#holcomb").show("fast")
   });
});
$(document).ready(function() {
    $("a#lunden").click(function () {
        $(".holcomb, .lunden, .maggie, .rosewood").hide("fast");
        $("button").hide("fast")
        $(".lunden").slideDown(1500);
        $("button#lunden").show("fast")
    });
});
$(document).ready(function() {
    $("a#maggie").click(function () {
        $(".holcomb, .lunden, .maggie, .rosewood").hide("fast");
        $("button").hide("fast")
        $(".maggie").slideDown(1500);
        $("button#maggie").show("fast")
    });
});
$(document).ready(function() {
    $("a#rosewood").click(function () {
        $(".holcomb, .lunden, .maggie, .rosewood").hide("fast");
        $("button").hide("fast")
        $(".rosewood").slideDown(1500);
        $("button#rosewood").show("fast")
    });
});
</script>

Мне просто нужна помощь в упрощении этого скрипта.

Все, что происходит, это то, что у меня есть несколько ссылок, и когда вы нажимаете на них, отображается div (с классом). Затем рядом со ссылкой также появляется кнопка, а затем, когда вы нажимаете, она закрывается (очевидно) или когда вы нажимаете на другую ссылку, она закрывает текущий открытый div и открывает другой div.

Комментарии:

1. Вы используете одно и то же id для нескольких элементов? Это недопустимый HTML, вы знаете

2. нет, я использую разные элементы идентификатора для каждой кнопки, все остальное использует классы.

Ответ №1:

Простое лучшее применение классов сделало бы этот код проще, но работающим с тем, что у вас есть…

 $(document).ready(function(){   
    $("button").click(function() {
        $(".holcomb, .lunden, .maggie, .rosewood").hide("slow");
        $("button").hide("fast");
    });

    $("a#holcomb, a#lunden, a#maggie, a#rosewood").click(function () {
       $(".holcomb, .lunden, .maggie, .rosewood").hide("fast");
       $("button").hide("fast");
       $("." this.id).slideDown(1500);
       $("button#" this.id).show("fast")
   });
});

Ответ №2:

Добавьте класс ко всем элементам, над которыми вы хотите, чтобы эта функция отображения / скрытия работала, тогда вы сможете делать все это с: 

 var $allElements = $(".showHide");


$allElements.click(function () {
    $allElements.hide("fast");
    $(this).slideDown(1500);
    /* you'd have to add some logic here for the matching button...
       ...perhaps give it an ID matching the link with a suffix of '-button' 
       or something */
});