使用一個代碼的多種功能

Question

所以我使用此代碼來滑動我的網頁上的一個框。你可以看到，我使用var id，爲某個盒子使用了切換功能，該盒子有自己的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

我不知道爲什麼你把「顯然，」循環不起作用，因爲這幾乎就是你應該做的。類似這樣的：

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

這是2個選項。

1. （我的偏好） -

而不是使用一個ID點擊事件添加到每個單獨的切換按鈕，使用每個相同的類，並在該類添加單擊事件的。當用戶點擊一個切換按鈕從點擊切換按鈕遍歷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點擊在我看來，7個不同IDS的事件（我不知道肯定）效率低於使用類別爲的單擊事件。這是我認爲在類上使用事件而不是在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"); 
    // ... 

    }