使用“this”来简化代码（简单的jQuery）
我有一堆表行，我正在使用复选框和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，稍微简化：
- 9man
- 18man
- 45man
- 90man
- 180man
- MTT
- Any
11/01/2010 ABC
45man admin Any Length: 1 11/01/2010 ABC
45man admin Any Length: 1 11/01/2010 ABC
45man admin Any Length: 1 11/01/2010 ABC
45man admin Any Length: 1
谢谢！ （对某些资源的一些指导解释this也将受到高度赞赏！）
使用id上的attribute-starts-with选择器（ ^= ） ，获取类的.toggle(bool)和.toggle(bool) ，可以将所有代码缩短为：
$(function(){ $("input[id^='game-']").change(function() { $("."+this.id.replace('game-','')).toggle(this.checked); }).change(); });
注意我在这里使用.change() ，它更适合复选框，并且在运行时不会翻转初始状态。
如果我正确理解你的代码，这应该做你想要的：
$(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(); });
;）