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

votos
1

Eu tenho o seguinte código jQuery.

Basicamente eu 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 show de 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 ajudou 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. É impressionante como rapidamente eu tenho a resposta. Continue com o ótimo trabalho.

Publicado 09/12/2008 em 19:39
fonte usuário
Em outras línguas...                            


3 respostas

votos
6

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 obedecer DRY 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 visual mais limpo visual, você pode usar o seguinte no lugar de $(document).ready(), se preferir. É exatamente a mesma coisa, apenas uma sintaxe diferente.

$(function() {
   //DOM ready
};
Respondeu 09/12/2008 em 19:52
fonte usuário

votos
1

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

Matt

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

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 ligados aos divs originais.

Respondeu 09/12/2008 em 20:06
fonte usuário

votos
0

É bom, mas você vai precisar de uma abordagem mais genérica, para as id você atribuídos.

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.

Respondeu 09/12/2008 em 20:01
fonte usuário

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