一码多用

Question

所以我使用这个代码，在我的网页上slideToggle一个盒子。

// 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对某个框使用切换函数，该框具有自己的css和html代码。

我还有7个盒子。到目前为止，我复制了7次代码，并将每个副本的id从2- 8更改为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

我不知道为什么你会说“显然”循环不起作用，因为这正是你应该做的。如下所示：

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

这是两个选项。

1. (也是我的首选) -

不使用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个不同的ID上使用7个单击事件的效率低于在1类上使用单个单击事件的效率。这就是我认为在类而不是IDS上使用事件的目的。

同样通过这种方式，当您想要在中添加另一个框或删除框时，您不需要修改任何Javascript，唯一需要维护此代码的是您决定更改HTML的结构，从而更改DOM的导航来执行切换。

使用您的方法执行

1. ：

var ids = "id1"，"id2"，"id3"；for( id中的变量id){ var $div =$(‘#id2-content-’+ id)；var $img =$(‘#toggler-img-’+ id)；var $toggler = $('toggler-‘+ id)；$div.hide() $toggler.click(){ if (sliding == false) { sliding = true；//打开/关闭$div.slideToggle($div.slideToggle，"swing")；// ... }