jQuery - Saklambaç yapma tüm / daha genel bu div resim göstermek

oy
1

i aşağıdaki jquery kodu var.

temelde ben birkaç üst üste div'leri ve tüm bu çakışan divs sağdaki bağlantıların bir listesi var. bir bağlantı üzerine gelindiğinde, bağlantının atanan div içinde solacak.

Aşağıdaki kod var ve onu (varsayılan windows' örnek resimler kullanır) çalışır, ama birisi optimize edebilir veya bunu jenerik yapmak için bir yol düşünemiyorum eğer, ben çok memnun olurum.

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


Göster Sunset göster Kış göster Mavi Hills göster Waterlillies


size Matt, TM ve Kron, gerçekten yardımcı oldu cevaplarınızı ederiz.

Ben tamamen anlatabildim hissetmiyorum ama TM aradığım cevabı verdi.

Ben KURU takip etmek istedim ve sağlanan kod TM bana işaretlemeyi sadece jQuery kodunu değiştirmek için ne gerektirmeyen beri en iyi bu sefer bana yardımcı oldu.

Yine, çok teşekkürler. Ben cevap var ne kadar çabuk Onun şaşırtıcı. Büyük iş kadar tutun.

Oluştur 09/12/2008 saat 19:39
kaynak kullanıcı
Diğer dillerde...                            


3 cevaplar

oy
6

Yapabileceğiniz ilk şey, daha temiz daha genel bir şeyle bütün o benzer çağrılar yerini yapmak için.

(not: tüm bu iç olduğunu varsayalım 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);
});

virgülle ayrılmış seçicileri kullanarak jQuery ile KURU itaat için harika bir yoldur.

Kullandığım $(element).data()set ve eleman üzerinde bazı verileri almak için, bu durumda, seçici uygun eleman güncellemek için kullanılır.

Ayrıca, sadece daha temiz bir görsel görünüm için, sen yerine aşağıdaki kullanabilirsiniz $(document).ready()Eğer tercih. Aynı şey, sadece farklı bir sözdizimi var.

$(function() {
   //DOM ready
};
Cevap 09/12/2008 saat 19:52
kaynak kullanıcı

oy
1

Ben de benzer bir soruya birkaç ay önce cevap jQuery Değiştirme Elemanları Eğer yardımcı olur.

Mat

Eğer göstermek istediğiniz div id içinde takas ve diğer DIV bunları gizlemek için bir jenerik sınıf adını yapmalıdır: i { '1' id} var Clarrification.

Bir öğeye mulitple sınıfları uygulayabilirsiniz remeber:

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

hangi orijinal divlere bağlı stil kuralları varsa yardımcı olabilir.

Cevap 09/12/2008 saat 20:06
kaynak kullanıcı

oy
0

Bu iyi, ama atadığınız id giden tarihiyle daha genel bir yaklaşım gerekir.

akla gelen en hızlı çözüm "#wrapped" bir üst div altında solmaya örtüşen div'leri tamamlamayı etmektir. vb 'NAME' 'Sunset 'Kış' olduğu CSS sınıfların tetik ADI', Sonra gibi bir şey yapabilirsiniz tüm bağlantıları alın ve bunları atamak:


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

Bu mümkün olan en iyi çözüm değil ama size bir fikir verir umarım.

Cevap 09/12/2008 saat 20:01
kaynak kullanıcı

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