jQuery - tornando Ocultar tudo / Mostrar esta imagem div mais genérico

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

  •  20-08-2019
  •  | 
  •  

Pergunta

Eu tenho o seguinte código jQuery.

basicamente i terá vários divs sobrepostas e uma lista de links à direita de todos os divs sobrepostas. quando pairando sobre um link, div atribuído do link vai desaparecer em.

Eu tenho o seguinte código e ele funciona (ele usa amostras de fotos as janelas padrão), mas se alguém pode pensar em uma maneira de otimizá-lo ou torná-lo genérico, eu aprecio isso. 

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


Mostrar por do sol Mostrar Inverno Mostrar Blue Hills Mostrar Waterlillies

Obrigado Matt, TM e Kron, suas respostas realmente ajudou.

Eu não sinto que eu me explicou totalmente, mas TM deu a resposta que eu estava procurando.

Eu queria seguir seco eo TM código fornecido me ajudado melhor este tempo, uma vez que não exigem para mim para alterar minha marcação, apenas o código jQuery.

Mais uma vez, muito obrigado. Seu como surpreendente rapidamente eu tenho a resposta. Manter a grande trabalho.

Foi útil?

Solução

A primeira coisa que você pode fazer, para torná-lo mais limpo é substituir todas as chamadas semelhantes com algo mais genérico.

(nota: assumir tudo isso está dentro de 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);
});

Usando seletores delimitados por vírgula é uma ótima maneira de DRY obedecer com jQuery.

Eu uso $(element).data() para definir e recuperar a alguns dados sobre o elemento, neste caso, o seletor usado para atualizar o elemento apropriado.

Além disso, apenas para um aspecto visual mais limpo, você pode usar o seguinte no lugar de $(document).ready(), se preferir. É exatamente a mesma coisa, apenas uma sintaxe diferente. 

$(function() {
   //DOM ready
};

Outras dicas

Eu respondi a uma pergunta semelhante há alguns meses jQuery Permuta Elements se isso ajuda.

Matt

Clarrification, onde eu tenho {id: '1'}. Você deve trocar o id do div que pretende mostrar e fazer um nome classe genérica por outro DIV de escondê-los

Lembre-se que você pode aplicar aulas mulitple a um elemento: 

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

o que pode ajudar se você tiver regras de estilo associadas a divs originais.

É bom, mas você vai precisar de uma abordagem mais genérica para o id é que você atribuiu.

A solução mais rápida que vem à mente é a de encerrar as divs sobrepostas que desaparecem em menos de um div pai "#wrapped". Tomar todas as ligações e atribuir-lhes classes CSS 'gatilho NAME' onde 'NAME' é 'Sunset 'Winter', etc. Então você pode fazer algo como: 


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

Não é a melhor solução possível, mas espero que isso lhe dá uma idéia.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top