JQuery - сделать все скрыть / показать это Диво изображение более общим

голоса
1

У меня есть следующий код JQuery.

в основном я буду иметь несколько внахлест дивы и список ссылок справа от всех этих перекрывающихся див. при наведении курсора на ссылку, присвоенный ДИВ на ссылку будет исчезать.

У меня есть следующий код и он работает (он использует изображения образца Windows по умолчанию), но если кто-то может придумать способ, чтобы оптимизировать его или сделать его универсальным, я ценю это.

<html>

<script type=text/javascript>
   $(document).ready(function() {

      $(#trigger1).mouseover(function() {

        $(.contentdiv).addClass(inactive);
        $(#divsunset).removeClass(inactive);
        $(.inactive).fadeOut(500);
        $(#divsunset).fadeIn(500);
      });


      $(#trigger2).mouseover(function() {

        $(.contentdiv).addClass(inactive);
        $(#divwinter).removeClass(inactive);
        $(.inactive).fadeOut(500);
        $(#divwinter).fadeIn(500);

      });

      $(#trigger3).mouseover(function() {

                $(.contentdiv).addClass(inactive);
                $(#divbh).removeClass(inactive);
                $(.inactive).fadeOut(500);
                $(#divbh).fadeIn(500);

      });

      $(#trigger4).mouseover(function() {

                $(.contentdiv).addClass(inactive);
                $(#divwl).removeClass(inactive);
                $(.inactive).fadeOut(500);
                $(#divwl).fadeIn(500);

      });

    });

</script>


<style>
    #divsunset
    {
        position: absolute;
        top: 5px;
        left: 5px;
    }
    #divwinter
            {
                position: absolute;
                top: 5px;
                left: 5px;
    }
    #divbh
                    {
                        position: absolute;
                        top: 5px;
                        left: 5px;
    }
    #divwl
                    {
                        position: absolute;
                        top: 5px;
                        left: 5px;
    }
    #links
                    {
                        position: absolute;
                        top: 800px;
                        left: 700px;
    }
    .inactive
    {
    }
</style>


Показать Sunset Show Winter Show Blue Hills Показать Waterlillies


Спасибо Matt, TM и Крон, ваши ответы очень помогли.

Я не чувствую, что я объяснил себя полностью, но при условии, TM ответ, который я искал.

Я хотел следовать СУХОЙ и код TM при условии, помог мне лучше в этот раз, так как она не требует для меня, чтобы изменить мою разметку, только код JQuery.

Опять же, спасибо. Его удивительно, как быстро я получил ответ. Продолжайте в том же духе.

Задан 09/12/2008 в 19:39
источник пользователем
На других языках...                            


3 ответов

голоса
6

Первым, что вы можете сделать, чтобы сделать его чище, это заменить все те аналогичные вызовы с чем-то более общим.

(примечание: предположим , все это находится внутри document.ready())

$('#trigger1').data('target', '#divsunset');
$('#trigger2').data('target', '#divwinter');
$('#trigger3').data('target', '#divbh');
$('#trigger4').data('target', '#divwl');
$('#trigger1,#trigger2,#trigger3,#trigger4').mouseover(function() {
    var selector = $(this).data('target');
    $(".contentdiv").addClass("inactive");
    $(selector).removeClass("inactive");
    $(".inactive").fadeOut(500);
    $(selector).fadeIn(500);
});

Использование запятых селекторов является отличным способом, чтобы подчиняться DRY с JQuery.

Я использую $(element).data()для установки и извлечения некоторых данных на элементе, в данном случае, селектор используется для обновления соответствующего элемента.

Кроме того , только для более чистого визуального взгляда, вы можете использовать следующие на месте $(document).ready(), если вы предпочитаете. Это точно то же самое, просто другой синтаксис.

$(function() {
   //DOM ready
};
Ответил 09/12/2008 в 19:52
источник пользователем

голоса
1

Я ответил на подобный вопрос несколько месяцев назад JQuery Перекачка Elements , если это помогает.

Matt

Clarrification, где я получил {идентификатор: «1»} вы должны поменять в идентификатору DIV вы хотите, чтобы показать и сделать имя общего класса на другой DIV, чтобы скрыть их.

Remeber, что вы можете применить Mulitple классов к элементу:

<Div class="name1 name2"></div>

которые могли бы помочь, если у вас есть правила стиля, прикрепленные к оригинальным дивы.

Ответил 09/12/2008 в 20:06
источник пользователем

голоса
0

Это хорошо, но вы будете нуждаться в более общий подходе к идентификаторам вы назначены.

Быстрое решение, которое приходит на ум, чтобы обернуть перекрывающиеся дивы, которые исчезают в рамках родительского DIV «#wrapped». Возьмите все ссылки и назначить их CSS классы «триггер NAME», где «NAME» является «Sunset„Зима“и т.д. Затем вы можете сделать что-то вроде:


   $(document).ready(function() {

      $(".trigger").mouseover(function() {

                $(".contentdiv").addClass("inactive");
                $("#wrapper ." + $(this).attr('class')[1]).removeClass("inactive");
                $(".inactive").fadeOut(500);
        $("#wrapper ." + $(this).attr('class')[1]).fadeIn(500);
      });

Это не лучшее решение, но надеюсь, что это дает вам идею.

Ответил 09/12/2008 в 20:01
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more