Question

我需要点击div.toggle1，控制幻灯片，滑动div#text1，

点击div.toggle7，控制幻灯片，然后点击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 code

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。其余的只是在每个'toggle'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/

Answer 2

两种解决方案：

引用您的HTML后，您可以执行以下操作：
```
jQuery(document).ready(function() {
    $("div.toggle").click(function() {
        $(this).next().toggle();
    });
});
```
...因为您正在切换的div是下一个相邻的div。另请注意，我正在使用jQuery的toggle函数来切换可见性。

但如果有可能改变而你正在为此辩护，请继续阅读......
在您的JavaScript代码中，您已经做了一些事情，可以完全避免counter knitti pointed out。但是你这样做的方式会不必要地创建函数，并且通过对你的循环计数器和匿名函数的参数使用相同的名称（i），你会很难阅读和维护这些代码

所以：
```
jQuery(document).ready(function() {

    for(i=1;i<11;i++){
        makeToggler(i);
    }

    function makeToggler(index){
        $('.toggle'+index).click(function(){
            $('#text'+index).toggle();
        });
    }
});
```
你可以看到制作东西的好坏，特别是使用循环计数器的不同名称和makeToggler的参数可以避免混淆。再次，使用jQuery的toggle函数，您无需在点击级别执行此操作。（另请注意，您不要将;放在for语句的结尾括号之后。）

Answer 3

您不需要硬编码循环。

保留当前的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');
    });
});

这将迭代所有<div>元素，其类名称以toggle开头，并附加正确的toggle函数。

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

Answer 4

为什么要引入新变量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);
};

Answer 5

如果您的HTML具有上述结构，则可以将所有toggleX个元素设为同一个类toggle，然后您只需执行以下操作：

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

DEMO

js数+1问题

5 个答案:

HTML

的JavaScript