Question

所以我正在使用此代码，在我的网页上滑动切换一个框。

// OPEN CERTAIN BOX
$(function() {    
    var sliding = false;    
    var mq = window.matchMedia( "(min-width: 700px)" );

    if (mq.matches) {
        var time = 500;
    } else {
        var time = 0;
    }

    var id = ('1');            
    var div = ('#toggle-content-' + id);
    var img = ('#toggle-img-' + id);
    var toggler = ('toggler-' + id);            
    $(div).hide()

    $(toggler).click(function() {
        if (sliding == false) {
            sliding = true;
            // Open / Close
            $( div ).slideToggle(time,"swing");
            // ...

正如你所看到的，我正在使用var id，对某个盒子使用toggle函数，它有自己的css和html代码。

我还有7个盒子。到目前为止，我已经复制了7次代码并将每个副本的ID从2改为8。有没有办法用一个代码来实现它？

我尝试了一个for循环，从1到8，但这显然没有用。有人有想法吗？或者我必须制作8份副本并更改ID。

编辑：

我使用for循环的方法：

$(function() {

var sliding = false;

var mq = window.matchMedia( "(min-width: 700px)" );

if (mq.matches) {
    var time = 500;
} else {
    var time = 0;
}

for(i = 1; i <= 8; i++){

var id = (i.toString());

var div = ('#toggle-content-'+id);
var img = ('#toggle-img-'+id);
var toggler = ('toggler-'+id);            
$( div ).hide()


    $( toggler ).click(function(){
    if (sliding == false){
    sliding = true;
        // Open / Close
        $( div ).slideToggle(time,"swing");
        ...

这是我的一个盒子的html代码：

<tr><td cellspacing="0" cellpadding="0" height="50px" class="upper">
                    <toggler-1><area-head-text><img id="toggle-img-1" src="images/box_opener.png"/>Starterpaket</area-head-text></toggler-1>
                </td></tr>
                <tr><td>      
                    <div id="toggle-content-1">
                    <area-head-text>
                    <img class="text-image" src="images/arrow.png"/>3&nbsp;individuelle Entwürfe<br>
                    <img class="text-image" src="images/arrow.png"/>3&nbsp;Korrekturzeichnungen<br>
                    <img class="text-image" src="images/arrow.png"/>Internationale Nutzungsrechte<br>
                    <img class="text-image" src="images/arrow.png"/>400€<br><br>
                    </area-head-text>
                    </div>         
                </td></tr>

Answer 1

我不确定你为什么放＆＃34;显然＆＃34;一个循环不起作用，因为这几乎就是你应该做的。像这样：

for(var i = 1; i <= 8; i++)
{          
    var div = $('#toggle-content-' + i);
    var img = $('#toggle-img-' + i);
    var toggler = $('toggler-' + i);            
    $(div).hide()

    $(toggler).click(function() {
        if (sliding == false) {
            sliding = true;
            // Open / Close
            $( div ).slideToggle(time,"swing");
            // ...
}

Answer 2

这是两个选项。

（和我的偏好） -

不是使用ID将click事件添加到每个单独的切换按钮上，而是在每个切换按钮上使用相同的类，并在该类上添加click事件。当用户点击切换按钮时，从点击的切换按钮遍历DOM，以在相关的<div>上执行切换。

这看起来像是：

$(function() {    

     $('.toggleBtn').click(function() {

        var sliding = $(this).data('sliding'); //use data attr to store sliding status        

        if (sliding == false) {
            $(this).data('sliding') = true;
        }else {
           return; //don't toggle we're sliding 
        }
        // navigate to element and toggle
        $(this).parent('.someParentElement').children('.theDiv').slideToggle(time,"swing");

       //clear sliding status 
       $(this).data('sliding', false);

    }

}

这是我的首选原因，因为虽然针对点击事件定位ID的速度比针对单个事件的类更快，但在7个不同的IDS上使用7个点击事件在我看来（我当然不知道）效率低于在 1 类上使用单击事件。这是我在课堂上而不是IDS上使用事件的目的。

同样，当您想要添加另一个框或删除框时，您不需要修改任何Javascript，维护此代码所需的唯一事情就是您决定更改HTML的结构，因此导航DOM以执行切换。

使用您的方法：

var ids = ["id1","id2","id3"];

for(var id in ids) {

 var $div = $('#toggle-content-' + id);
 var $img = $('#toggle-img-' + id);
 var $toggler = $('toggler-' + id); 

 $div.hide()

 $toggler.click(function() {

   if (sliding == false) {
     sliding = true;
     // Open / Close
     $div.slideToggle(time,"swing");
     // ...

   }

一个代码的多个功能

2 个答案: