Question

我有一堆表行，我正在使用复选框和jQuery隐藏/显示。复选框为id="game-XYZ"，行为class="XYZ"。目前，我正在使用严重臃肿的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简化代码的简单方法，但我不确定如何做到这一点。我真的很感激有人可以解决这个问题！（双关打算。:)）

有关更多详细信息，请参阅HTML，稍微简化一下：

<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的资源的一些指导也将受到高度赞赏！）

Answer 1

使用id上的attribute-starts-with selector (^=)，this.id获取课程，.toggle(bool)，您可以将所有代码缩短至此：

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

注意我在这里使用.change()，这更适合复选框，并且在运行时不会翻转初始状态。

Answer 2

如果我正确理解你的代码，这应该做你想要的：

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

或者，更加浓缩但边界不可读：

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

）

使用“this”来简化代码（简单的jQuery）

2 个答案: