Utilisez "this" pour simplifier le code (jQuery simple)

Question

J'ai un tas de lignes de table que je cache/montre en utilisant les cases à cocher et jQuery. Les cases à cocher ont id="game-XYZ" et les lignes ont class="XYZ". À l'heure actuelle, j'utilise jQuery sérieusement pléthorique:

$(document).ready(function(){ 
    if ($("#game-9man").is(":checked")){ $(".9man").show(); } 
    else{ $(".9man").hide(); } 
    $("#game-9man").click(function(){  
     if ($("#game-9man").is(":checked")){ $(".9man").show(); } 
     else{ $(".9man").hide(); } 
     }); 

    if ($("#game-18man").is(":checked")){ $(".18man").show(); } 
    else{ $(".18man").hide(); } 
    $("#game-18man").click(function(){  
     if ($("#game-18man").is(":checked")){ $(".18man").show(); } 
     else{ $(".18man").hide(); } 
     }); 

    if ($("#game-45man").is(":checked")){ $(".45man").show(); } 
    else{ $(".45man").hide(); } 
    $("#game-45man").click(function(){  
     if ($("#game-45man").is(":checked")){ $(".45man").show(); } 
     else{ $(".45man").hide(); } 
     }); 

    if ($("#game-90man").is(":checked")){ $(".90man").show(); } 
    else{ $(".90man").hide(); } 
    $("#game-90man").click(function(){  
     if ($("#game-90man").is(":checked")){ $(".90man").show(); } 
     else{ $(".90man").hide(); } 
     }); 

    if ($("#game-180man").is(":checked")){ $(".180man").show(); } 
    else{ $(".180man").hide(); } 
    $("#game-180man").click(function(){  
     if ($("#game-180man").is(":checked")){ $(".180man").show(); } 
     else{ $(".180man").hide(); } 
     }); 

    if ($("#game-mtt").is(":checked")){ $(".mtt").show(); } 
    else{ $(".mtt").hide(); } 
    $("#game-mtt").click(function(){  
     if ($("#game-mtt").is(":checked")){ $(".mtt").show(); } 
     else{ $(".mtt").hide(); } 
     }); 

    if ($("#game-any").is(":checked")){ $(".any").show(); } 
    else{ $(".any").hide(); } 
    $("#game-any").click(function(){  
     if ($("#game-any").is(":checked")){ $(".any").show(); } 
     else{ $(".any").hide(); } 
     }); 
}); 

Je suis sûr qu'il ya une façon simple de simplifier le code en utilisant this, mais je ne sais pas exactement comment le faire. J'apprécierais vraiment toute lumière que quelqu'un pourrait donner à ce sujet! (Jeu de mots :).)

Pour quelques détails, voici le code HTML, un peu simplifié:

<ul> 
    <li><input id="game-9man" type="checkbox" checked="checked"> 9man</li> 
    <li><input id="game-18man" type="checkbox" checked="checked"> 18man</li> 
    <li><input id="game-45man" type="checkbox" checked="checked"> 45man</li> 
    <li><input id="game-90man" type="checkbox" checked="checked"> 90man</li> 
    <li><input id="game-180man" type="checkbox" checked="checked"> 180man</li> 
    <li><input id="game-MTT" type="checkbox" checked="checked"> MTT</li> 
    <li><input id="game-any" type="checkbox" checked="checked"> Any</li> 
</ul> 

<table> 
    <tr class="45man 90man any liveplay admin" id="90man"> 
     <td>11/01/2010</td> 
     <td><h4><a href="#">ABC</a></h4></td> 
     <td><a href="#" rel="tag">45man</a></td> 
     <td>admin</td> 
     <td><a href="#" rel="tag">Any</a></td> 
     <td>Length: 1</td> 
    </tr> 
    <tr class="45man 90man any liveplay admin" id="90man"> 
     <td>11/01/2010</td> 
     <td><h4><a href="#">ABC</a></h4></td> 
     <td><a href="#" rel="tag">45man</a></td> 
     <td>admin</td> 
     <td><a href="#" rel="tag">Any</a></td> 
     <td>Length: 1</td> 
    </tr> 
    <tr class="45man 90man any liveplay admin" id="90man"> 
     <td>11/01/2010</td> 
     <td><h4><a href="#">ABC</a></h4></td> 
     <td><a href="#" rel="tag">45man</a></td> 
     <td>admin</td> 
     <td><a href="#" rel="tag">Any</a></td> 
     <td>Length: 1</td> 
    </tr> 
    <tr class="45man 90man any liveplay admin" id="90man"> 
     <td>11/01/2010</td> 
     <td><h4><a href="#">ABC</a></h4></td> 
     <td><a href="#" rel="tag">45man</a></td> 
     <td>admin</td> 
     <td><a href="#" rel="tag">Any</a></td> 
     <td>Length: 1</td> 
    </tr> 
</table> 

Merci! (Quelques conseils à certaines ressources expliquant this serait également très apprécié!)

Answer 1

l'utilisation d'un attribute-starts-with selector (^=) sur id, this.id pour obtenir la classe, et .toggle(bool), vous pouvez raccourcir tout votre code à ceci:

$(function(){ 
    $("input[id^='game-']").change(function() { 
    $("."+this.id.replace('game-','')).toggle(this.checked); 
    }).change(); 
}); 

Remarque je .change() ici, qui est plus approprié pour une case à cocher, et ne sera pas retourner l'état initial quand il fonctionne.

Answer 2

Si je comprends bien votre code, cela devrait faire ce que vous voulez:

$(document).ready(function() {  
    $('ul input[id^=game]').change(function() { 
     var $el = $('.'+this.id.split('-')[1]); 
     if(this.checked) { 
      $el.show(); 
     } else { 
      $el.hide(); 
     } 
    }).change(); 
}); 

Ou, encore plus condensé mais illisible limite:

$(document).ready(function() {  
    $('ul input[id^=game]').change(function() { 
     $('.'+this.id.split('-')[1])[this.checked ? "show" : "hide"](); 
    }).change(); 
}); 

;)