问js编号+1问题

EN

让我们把事情简化一点。jQuery的优点之一是您可以将事件处理程序同时应用于多个元素。首先给你所有的“切换”div添加一个通用的类名：

HTML

<div class="toggle toggle1">click</div>
<div id="text1">text1</div>
<div class="toggle toggle7">click</div>
<div id="text7">text2</div>

现在，您可以只使用一个选择器来针对所有这些div。剩下的事情就是找出每个“切换”div的类名中的数字差异：

JavaScript

jQuery(document).ready(function() {

    $('.toggle').toggle(off, on);

    function on() {
        var i = this.className.match(/[0-9]+/)[0];
        $('#text'+i).css('display','block');
    }

    function off() {
        var i = this.className.match(/[0-9]+/)[0];
        $('#text'+i).css('display','none');
    }
});

我已经更新了您的jsFiddle项目。希望这能为您解决问题：http://jsfiddle.net/ninjascript/qHY8K/3/

两种解决方案：

使用引用的

1. ，您只需执行以下操作：

jQuery(文档).ready(function(){ $("div.toggle").click(function() { $(this).next().toggle()；})；})；

...since你要切换的div是下一个相邻的div。还要注意，我使用了jQuery的toggle函数来切换可见性。

但是，如果这种情况可能会改变，并且您正在防御它，请继续阅读...

• 在您的JavaScript代码中，您已经在做一些事情，可以完全避免使用counter，就像knitti pointed out一样。但是这样做会不必要地创建函数，并且对循环计数器和匿名函数的参数使用相同的名称(i)，这会使代码的读取和维护变得非常困难。

所以：

jQuery(document).ready( function () { for(i=1;i<11;i++){ makeToggler(i)；}function makeToggler(索引){$(‘.togger’+索引).click(function(){$(‘#text’+索引).toggle()；})；} })；

您可以看到这使事情变得多么美好和清晰，特别是对循环计数器使用不同的名称，并且makeToggler的参数避免了混淆。同样，使用jQuery的toggle函数，您不需要在单击级别执行此操作。(还要注意，不要将;放在for语句的结束大括号之后。)

你不需要硬编码的循环。

保留当前的超文本标记语言，并使用这样的jQuery代码：

$("div[class^='toggle']").each(function() {
    var num = $(this).attr("class").replace("toggle", "");
    $(this).toggle(function(){
        $('#text' + num).css('display','none');
    },
    function() {
        $('#text' + num).css('display','block');
    });
});

这将遍历类名以toggle开头的所有<div>元素，并将它们附加到适当的toggle函数。

更新的jsFiddle：http://jsfiddle.net/qHY8K/5/