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

StackOverflow https://stackoverflow.com/questions/353772

  •  20-08-2019
  •  | 
  •  

Вопрос

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

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

У меня есть следующий код, и он работает (он использует образцы изображений 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>


Show Sunset Show Winter Show Blue Hills Show Waterlillies

Спасибо, Мэтт, TM и kRON, ваши ответы очень помогли.

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

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

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

Это было полезно?

Решение

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

(примечание:предположим, что все это внутри 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
};

Другие советы

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

Мэтт

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

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

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

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

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

Самое быстрое решение, которое приходит на ум, — это обернуть перекрывающиеся элементы div, которые исчезают под родительским элементом div «#wrapped».Возьмите все ссылки и назначьте им классы CSS «ИМЯ триггера», где «ИМЯ» — «Закат», «Зима» и т. д.Тогда вы можете сделать что-то вроде:


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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top