jQuery Yardım kullanma slideToggle tablo satır!

5 Cevap php

Hey, 'daha fazla bilgi' butonuna tıklandığında ben bir tablo satırı slideToggle şimdi bir hafta boyunca çalışıyorlar ama hiçbir şey çalışıyor görünüyor.

Herkes bana slideToggle 'daha-info-1', 'daha-info-2', 'daha-info-3' tr etiketleri yardımcı ca eğer öyleyse ben jQuery için yeni. 'Daha fazla-bilgi-' falan kullanmak gibi - asıl sorun bu id php dinamik olarak oluşturulur ve ben jQuery seçmek için bunları nasıl anlamıyorum olmasıdır.

I would like it to work like this example: Here minus the iframes of course.

Kullanıcı 'daha fazla bilgi' düğmesini tıklayın ve ardından 'daha-info-' tr aşağı doğru kayacaktır.

Burada sayfa kaynak: (Ben bunu yapmanın özel bir yolu var, Stackoverflow düzgün HTML eklemek için nasıl bilmiyorum - kod düğme HTML ile düzgün çalışmıyor)

html

div id = "çıkışı-listeleri"

div class="main-info"

    table class="listings"

        tbody

                tr id="more-info-1" class="mi-1"

                    td

                    div id="more-1" class="more-information"/div

                    /td

                /tr

                tr id="main-info-1"

                    tdLeftlane News/td

                    tdwww.leftlanenews.com//td

                    tda id="link-1" class="more-info-link" href="#"More info/a/td

                /tr

                tr id="more-info-2" class="mi-2"

                    td

                    div id="more-2" class="more-information"/div

                    /td

                /tr

                tr id="main-info-2"

                    tdMotor Authority/td

                    tdwww.motorauthority.com/ /td

                    tda id="link-2" class="more-info-link" href="#"More info/a/td

                /tr

                tr id="more-info-3" class="mi-3"

                    td

                    div id="more-3" class="more-information"/div

                    /td

                /tr

                tr id="main-info-3"

                    tdAutoblog/td

                    tdhttp://www.autoblog.com//td

                    tda id="link-3" class="more-info-link" href="#"More info/a/td

                /tr

        /tbody

    /table

/div

/ Div - end çıkış-listeleri -

/ Html

Ben büyük yardım takdir ediyorum, çok teşekkür ederim.

5 Cevap

Craig tepki çalışıyor olsa, kodunuzu sınırlamak ve jquery belli bir kapsam içinde TR bütün elemanları kapmak için izin ve o önerdi olarak id dışarı ayrıştırma, vb olabilir

$(".listings tbody tr").each(function(index) {
    // hide by default
    $(this).css({'display': 'none'});


    // set the onclicks
    $(this).click(function() {
      // your dosomething can change your appearance
      dosomething(the_id_you_parse_out);
    });
});

JQuery en seçici kullanmak nasıl özü alabilir böylece çalışma kodu şu, ben sadece birlikte attım emin değilim.

Eğer böyle bir şey istiyorum gibi hızlı bir bakışta görünüyor.

$('#link-1').click(function(){
    $('#more-info-1').slideToggle()
})

Ayrıca sınıflar nasıl ayarlanır değiştirerek her üç ile çalışmak için bu komut dosyasını bir genelleme yapabiliriz, ya da iç işlev tıkladım ve iç jQuery çağrı içine beslemek inci bağlantı sayısını ayrıştırmak alarak:

$('.more-info-link').click(function(){
    var id = $(this).attr('id');
    var num = id.substr(id.length-1,1);
    $('#more-info-'+num).slideToggle();
})

Görünür eklenti style = olmaktan TRS tutmak için: onlara 'display: none'.

Eğer başka bir amaç için elemanlara belirli bir id atamanız gerekir bağlı olarak, aslında tek tek id vermek gerek kalmadan yapabilirsiniz.

Bu örnekte, yük biz birinci sınıf, açılıp herhangi tr gizleyebilirsiniz. Sonra DOM seviyelerinin bir çift atlamak için jQuery söylemek ve sonraki tr gizlemek - Bu bir id aramak için gereksinimini ortadan kaldırır.

Bunun için örnek jQuery:

$(document).ready(function(){

$("#tableToggle tr.toggleable").hide();

$("#tableToggle .tableToggleButton").click(function(){
	$(this).parent().parent().next('tr').slideToggle();													
});

});

Örnek modifiye tablosu:

<table id="tableToggle">
<tbody>
<tr>
<td><div class="tableToggleButton">More info 1</div></td>
</tr>
<tr class="toggleable">
<td>Main info 1</td>
</tr>
<tr>
<td><div class="tableToggleButton">More info 1</div></td>
</tr>
<tr class="toggleable">
<td>Main info 1</td>
</tr>
</tbody>
</table>

DOM hazır olduğunda jquery kodu genellikle yürütür yana, her zaman görürsünüz TR'nin bunu gizlemek için başlangıçta CSS kullanmak yoksa sadece bir milisaniye için js kodu gizler kadar bile.

Yani burada katkıda muhtemelen sorunuzu yanıtladı. Sadece başlangıçta TR'nin kullanarak CSS gizlemek ve sonra gerisini JS kullanabilirsiniz olduğunu eklemek istiyorum.

Dikkat etmeniz gereken bir kural denemek ve almak sizin "default" sayfa gösterimi yalnızca CSS kullanarak ve daha sonra jquery kodu ile zengin işlevsellik eklemek için. Ya da en azından ben öyle yapardım.

etiketler