使用"this"简化代码(简单的jQuery) [英] Use "this" to simplify code (simple jQuery)

问题描述

我有一堆表行，它们使用复选框和jQuery隐藏/显示.复选框具有id="game-XYZ"，行具有class="XYZ".当前，我正在使用肿的jQuery:

I have a bunch of table rows that I'm hiding/showing using checkboxes and jQuery. The checkboxes have id="game-XYZ" and the rows have class="XYZ". Currently, I'm using the seriously bloated jQuery:

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

我确定有一些简单的方法可以使用this简化代码，但是我不确定如何做到.我真的很感谢有人可以对此发出启示！ (想用双关语:))

I'm sure there's some easy way to simplify the code using this, but I'm not exactly sure how to do it. I'd really appreciate any light someone could shed on this! (Pun intended. :) )

有关更多详细信息，以下是经过简化的HTML:

For some more details, here's the HTML, somewhat simplified:

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

谢谢！ (对一些解释this的资源的指导也将受到高度赞赏！)

Thanks! (Some guidance towards some resources explaining this would also be highly appreciated!)

推荐答案

使用属性-在id，this.id上使用选择器(^=)启动以获取类，并

Using an attribute-starts-with selector (^=) on id, this.id to get the class, and .toggle(bool), you can shorten all your code down to this:

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

请注意，我在这里使用 .change() ，它更适合用于复选框，因此不会t在运行时翻转初始状态.

Note I used .change() here, which is more appropriate for a checkbox, and won't flip the initial state when it runs.

这篇关于使用"this"简化代码(简单的jQuery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！