jQuery birden onay kutusu filtreleri

oy
1

Ben olayların bir listesi var, bu olaylar belirli türdeki her vardır ve belirli bir ay içinde başlayacak. Aylarca bir onay kutusu türleri için grubu ve bir tane var. Ne yapmaya çalışıyorum listesine filtre uygulamak için onay kutularını kullanmaktır. Ben bir grup ile çalışan var, ama ikisi ile çalışan almak için görünmüyor olabilir.

Temelde ben liste öğesi gizlemek zaman bir sınıf ayarlamak çalışıyorum, bu yüzden grup sakladı hangi biliyorum, ama karışık gibi görünüyor. sınıf isimleri doğru ancak bazı öğelerin bazen tekrar gösterilen alamadım.

Herkes yanlış yapıyorum bakın veya iyi olurdu daha iyi bir çözüm düşündüyseniz! Teşekkürler!

Darren.

JavaScript'im:

$(#options input.type_check).change(function() {
    if($(this).is(':checked')) {
        $(#events li.+$(this).attr('id')).removeClass('type_hidden');
        if(!$(#events li.+$(this).attr('id')).hasClass('start_hidden')) {
            $(#events li.+$(this).attr('id')).slideDown();
        }
    } else {
        $(#events li.+$(this).attr('id')).addClass('type_hidden');
        $(#events li.+$(this).attr('id')).slideUp();
    }
    return false;
});

$(#options input.start_check).change(function() {
    if($(this).is(':checked')) {
        $(#events li.+$(this).attr('id')).removeClass('start_hidden');
        if(!$(#events li.+$(this).attr('id')).hasClass('type_hidden')) {
            $(#events li.+$(this).attr('id')).slideDown();    
        }
    } else {
        $(#events li.+$(this).attr('id')).addClass('start_hidden');
        $(#events li.+$(this).attr('id')).slideUp();
    }
    return false;
});

Benim HTML:

<p>Types:</p>
<div><input name=type[] type=checkbox id=type_0 value=0 class=type_check checked=checked /><label for=type_0>Type 0</label></div>
<div><input name=type[] type=checkbox id=type_1 value=1 class=type_check checked=checked /><label for=type_1>Type 1</label></div>
<div><input name=type[] type=checkbox id=type_2 value=2 class=type_check checked=checked /><label for=type_2>Type 2</label></div>
<div><input name=type[] type=checkbox id=type_3 value=3 class=type_check checked=checked /><label for=type_3>Type 3</label></div>
<div><input name=type[] type=checkbox id=type_4 value=4 class=type_check checked=checked /><label for=type_4>Type 4</label></div>

<p>Starts:</p>
<div><input name=start[] type=checkbox id=start_072009 value=072009 class=start_check checked=checked /><label for=type_072009>July 2009</label></div>
<div><input name=start[] type=checkbox id=start_082009 value=082009 class=start_check checked=checked /><label for=type_082009>August 2009</label></div>
<div><input name=start[] type=checkbox id=start_092009 value=092009 class=start_check checked=checked /><label for=type_092009>September 2009</label></div>
<div><input name=start[] type=checkbox id=start_102009 value=102009 class=start_check checked=checked /><label for=type_102009>October 2009</label></div>

<p>Events</p>
<ul id=events>
    <li id=1768 class=type_0 start_072009>Event 1</li>
    <li id=2190 class=type_1 start_072009>Event 2</li>
    <li id=2191 class=type_2 start_072009>Event 3</li>
    <li id=1864 class=type_2 start_082009>Event 4</li>
    <li id=1679 class=type_3 start_082009>Event 5</li>
    <li id=2042 class=type_0 start_092009>Event 6</li>
    <li id=1717 class=type_4 start_092009>Event 7</li>
    <li id=1917 class=type_4 start_092009>Event 8</li>
    <li id=1767 class=type_4 start_092009>Event 9</li>
    <li id=1866 class=type_2 start_102009>Event 10</li>
</ul>
Oluştur 14/07/2009 saat 15:27
kaynak kullanıcı
Diğer dillerde...                            


3 cevaplar

oy
4

senin LI'lar geçersiz üzerine kimliği niteliklerini - onlar sadece sayılar olamaz. üzerlerinde atamaları yapmaya çalışırken JavaScript muhtemelen şok edecek.

: Standardını Bkz http://www.w3.org/TR/REC-html40/types.html#type-name

İD ve AD jeton bir harf ile başlamalıdır ([A-Za-z]) ve basamak ([0-9]), tire harf herhangi bir sayıda ile takip edilebilir ( "-"), alt ( "_") , iki nokta ( ":"), ve noktalar (. "").

Cevap 14/07/2009 saat 17:48
kaynak kullanıcı

oy
0

Bu satırı değiştirin:

$("#options input.type_check").change(function() {

Buna:

$("#options input.type_check").click(function() {

Senin start_check seçicinin benzer bir değişiklik yapın. Bu kanca clickolay yerine changesizin onay kutularını olay. Bu olay fare veya klavye onay kutusunu değiştirmek için kullanılıp kullanılmayacağını patlayacaktır.

IE7 ve Firefox kullanarak bilgisayar üzerinde test edildi.

Cevap 14/07/2009 saat 18:23
kaynak kullanıcı

oy
0

Tamam, burada bir düzeltme. Değişiklik:

if(!$("#events li."+$(this).attr('id')).hasClass('start_hidden')) {
    $("#events li."+$(this).attr('id')).slideDown();
}

için:

$("#events li).not(".type_hidden, .start_hidden").slideDown();

her iki yerde de.

Cevap 14/07/2009 saat 21:59
kaynak kullanıcı

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