Javascript js编号+；1问题

我需要单击

div.toggle1

，控制滑块，向下滑动

div#text1

单击

div.toggle7

，控制滑块，向下滑动

div\text7

这是我的代码，也是我的

number+1

不工作，需要帮助。谢谢

html

点击
文本1
点击
文本2

js代码

jQuery(document).ready(function() {
counter = 0;
    for(i=1;i<11;i++){
        (function(i){
            counter = counter +1;
            $('.toggle'+counter).toggle(function(){
                $('#text'+counter).css('display','none');
            },
            function() {
                $('#text'+counter).css('display','block');
            });
        })(i);
    };  
});

jQuery（文档）.ready（函数（）{
计数器=0；
对于（i=1；i为什么要引入一个新变量
counter
？（如果需要，应该使用
var counter=0；
）

在函数中，只需使用复制的循环变量
i
：

for(i=1;i<11;i++){
    (function(i){
        $('.toggle'+i).toggle(function(){
            $('#text'+i).css('display','none');
        },
        function() {
            $('#text'+i).css('display','block');
        });
    })(i);
}; 

for（i=1；i为什么要引入一个新变量
counter
？（如果需要，应该使用
var counter=0；
）

在函数中，只需使用复制的循环变量
i
：

for(i=1;i<11;i++){
    (function(i){
        $('.toggle'+i).toggle(function(){
            $('#text'+i).css('display','none');
        },
        function() {
            $('#text'+i).css('display','block');
        });
    })(i);
}; 

for（i=1；i让我们稍微简化一下。jQuery的一个优点是，您可以同时将事件处理程序应用于多个元素。首先，向所有“toggle”div添加一个公共类名：

HTML
我已经更新了您的JSFIDLE项目。希望这对您有帮助：
让我们简化一些事情。jQuery的一个好处是，您可以同时将事件处理程序应用于多个元素。首先，向所有“toggle”div添加一个公共类名：

HTML
我已经更新了您的JSFIDLE项目。希望这对您有用：
如果您的HTML具有如上所述的结构，您可以将所有的
toggleX
元素都赋予相同的类
toggle
，然后您所要做的就是：

$('.toggle').toggle(function(){
    $(this).next().css('display','none');
},
function() {
    $(this).next().css('display','block');
});

如果您的HTML具有如上所述的结构，您可以将所有的
toggleX
元素赋予相同的类
toggle
，然后您所要做的就是：

$('.toggle').toggle(function(){
    $(this).next().css('display','none');
},
function() {
    $(this).next().css('display','block');
});

您不需要硬编码循环

保留您当前的HTML，改为使用以下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
开头的
元素，并将它们附加到适当的
toggle
函数

更新的JSFIDLE:
您不需要硬编码循环

保留您当前的HTML，改为使用以下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
开头的
元素，并将它们附加到适当的
toggle
函数

更新的JSFIDLE:
两种解决方案：

引用HTML后，您可以执行以下操作：

jQuery(document).ready(function() {
    $("div.toggle").click(function() {
        $(this).next().toggle();
    });
});

…因为您要切换的div是下一个相邻的div。请注意，我正在使用jQuery的
toggle
函数切换可见性

但如果可能的话，这种情况可能会改变，而你正在为之辩护，请继续阅读

在JavaScript代码中，您已经在做一些事情，可以完全避免使用
计数器，例如。但是您这样做的方式不必要地使用相同的名称（
i
）创建函数对于循环计数器和匿名函数的参数，读取和维护代码都非常困难

因此：

jQuery（文档）.ready（函数（）{
对于（i=1；i两种解决方案：

引用HTML后，您可以执行以下操作：

jQuery(document).ready(function() {
    $("div.toggle").click(function() {
        $(this).next().toggle();
    });
});

…因为您要切换的div是下一个相邻的div。请注意，我正在使用jQuery的
toggle
函数切换可见性

但如果可能的话，这种情况可能会改变，而你正在为之辩护，请继续阅读

在JavaScript代码中，您已经在做一些事情，可以完全避免使用
计数器，例如。但是您这样做的方式不必要地使用相同的名称（
i
）创建函数对于循环计数器和匿名函数的参数，读取和维护代码都非常困难

因此：

jQuery（文档）.ready（函数（）{
对于（i=1；i+1，但所讨论的
i
不是循环变量，而是构造函数的参数。这真的非常重要。：-@tjcrowder:啊，是的……你当然是对的。但是在这篇文章中，匿名函数是完全不必要的code@knitti：事实上，这很重要（尽管将其匿名化并重复创建不是必要的，也不是最佳做法）。否则，您的解决方案会遇到与原始解决方案相同的问题，事件处理程序闭包具有对
i
的持久引用，而不是在创建它们时的副本。因此，当事件发生时，所有处理程序都将试着对元素进行操作（
text11
）这是不存在的。+1，但是所讨论的
i
不是循环变量，它是构造函数的参数。这真的非常重要。：-@tjcrowder:啊，是的……你当然是对的。但是在这篇文章中，匿名函数是非常不必要的code@knitti：事实上，这很重要（尽管将其匿名化并重复创建不是必要的，也不是最佳做法）。否则，您的解决方案会遇到与原始解决方案相同的问题，事件处理程序闭包具有对
i
的持久引用，而不是在创建它们时的副本。因此，当事件发生时，所有处理程序都将试着对元素进行操作（
text11
）这是不存在的。我会说，这是一个很好的代码，永远不需要循环，谢谢。但是非常脆弱。如果他添加任何其他带有数字的类，它将失败。可以用regexp修复它。我会说，这是一个很好的代码，永远不需要循环，谢谢。但是非常脆弱。如果他添加任何其他带有数字的类，它将失败对于任何切换div，它都失败。可以用regexp修复。这也是一个不错的函数，甚至不需要
。match
这也是一个不错的函数，甚至不需要
。match