jQuery - сделать скрыть все / показать это изображение div более общим - PullRequest
Новая
       6

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

1 голос
/ 09 декабря 2008

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

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

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

<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>


Показать закат Зима шоу Шоу Голубых Холмов Шоу водяных лилий

Спасибо, Мэтт, ТМ и КРОН, ваши ответы действительно помогли.

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

Я хотел следовать DRY, и код, предоставленный TM, помог мне лучше всего в этот раз, так как мне не требовалось изменять разметку, только код jQuery.

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

Ответы [ 3 ]

6 голосов
/ 09 декабря 2008

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

(примечание: предположим, что все это внутри 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
};
1 голос
/ 09 декабря 2008

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

Мэтт

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

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

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

, что может помочь, если у вас есть правила стиля, прикрепленные к исходным элементам div.

0 голосов
/ 09 декабря 2008

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

Самое быстрое решение, которое приходит на ум, - это обернуть перекрывающиеся div, которые появляются под родительским div "#wrapped". Возьмите все ссылки и назначьте им CSS-классы 'trigger NAME', где 'NAME' - это 'Sunset,' Winter 'и т. Д. Затем вы можете сделать что-то вроде: 


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

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

...