javascript - js数+1问题

Question

我需要点击div.toggle1，控制slideup，slidedown div#text1，

点击div.toggle7，控制slideup，slidedown div#text7。

这是我的代码，也在 http://jsfiddle.net/qHY8K/ 中我的 number +1 不工作，需要帮​​助。谢谢。

html

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

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

Answer 1

让我们稍微简化一下。 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/