jQuery φίλτρα πολλαπλών πλαίσιο ελέγχου

ψήφοι
1

Έχω μια λίστα με τις εκδηλώσεις, τα γεγονότα αυτά είναι το καθένα από ένα συγκεκριμένο τύπο, και να αρχίσει σε ένα συγκεκριμένο μήνα. Έχω μια ομάδα πλαίσιο ελέγχου για τους τύπους και μία για μήνες. Αυτό που προσπαθώ να κάνω είναι να χρησιμοποιήσετε τα πλαίσια ελέγχου για να φιλτράρετε τη λίστα. Έχω να εργάζεται με μια ομάδα, αλλά δεν φαίνεται να μπορεί να το πάρει σε συνεργασία με δύο.

Βασικά είμαι προσπαθεί να δημιουργήσει μια τάξη, όταν κρύβουν το στοιχείο της λίστας, οπότε ξέρω σε ποια ομάδα θα έκρυψε, αλλά φαίνεται να μπερδευτείτε. Τα ονόματα της κατηγορίας είναι σωστές, αλλά μερικές φορές αντικείμενα δεν παίρνουν εμφανίζεται και πάλι.

Αν κάποιος μπορεί να δει τι κάνω λάθος, ή σκεφτείτε μια καλύτερη λύση που θα είναι μεγάλη! Ευχαριστώ!

Darren.

Μου την Javascript για:

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

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>
Δημοσιεύθηκε 14/07/2009 στις 15:27
πηγή χρήστη
Σε άλλες γλώσσες...                            


3 απαντήσεις

ψήφοι
4

Το αναγνωριστικό αποδίδει στο LIS σας είναι άκυρο - δεν μπορεί να είναι μόνο αριθμοί. Η Javascript θα πνίξει μάλλον όταν προσπαθούν να κάνουν τις εργασίες τους.

Δείτε το πρότυπο: http://www.w3.org/TR/REC-html40/types.html#type-name

ID και ΕΠΩΝΥΜΙΑ μάρκες πρέπει να αρχίζει με ένα γράμμα ([A-Za-z]) και μπορεί να ακολουθείται από οποιοδήποτε αριθμό των γραμμάτων, ψηφίων ([0-9]), παύλες ( "-"), κάτω παύλες ( "_") , άνω και κάτω τελεία ( ":") και τελείες ( "").

Απαντήθηκε 14/07/2009 στις 17:48
πηγή χρήστη

ψήφοι
0

Αλλάξτε αυτή τη γραμμή:

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

Σε αυτό:

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

Κάντε μια παρόμοια αλλαγή στην επιλογή start_check σας. Αυτό αγκίστρια το clickγεγονός, αντί να την changeεκδήλωση στο πλαίσια ελέγχου σας. Η εκδήλωση θα απολύσει αν το ποντίκι ή το πληκτρολόγιο χρησιμοποιείται για να αλλάξει το πλαίσιο ελέγχου.

Θα δοκιμαστεί στον υπολογιστή μου με τη χρήση IE7 και Firefox.

Απαντήθηκε 14/07/2009 στις 18:23
πηγή χρήστη

ψήφοι
0

Εντάξει, εδώ είναι η λύση. Αλλαγή:

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

προς το:

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

και στα δύο μέρη.

Απαντήθηκε 14/07/2009 στις 21:59
πηγή χρήστη

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