2009-07-16 94 views
2

我會盡量保持這個簡短。我試圖創建一些隱藏或顯示用戶單擊擴展按鈕時顯示的文本框。我正在使用toggle()方法。jQuery.each()麻煩

標記是這樣的:

<span id="toggle0">+</span> 
<div id="toggle0Container"> 
    blablabla... 
<div> 

<span id="toggle1">+</span> 
<div id="toggle1Container"> 
    blablabla... 
<div> 

<span id="toggle2">+</span> 
<div id="toggle2Container"> 
    blablabla... 
<div> 

// etc 

的#toggle0應該切換#toggle0Container,toggle1切換的#toggle1Container等等#。這全部由PHP生成,因此可以有任意數量的這些容器。

這裏是jQuery代碼:

$(document).ready(function() { 
    // array of numbers, it's pretty redundant, there will never be more than 30 containers 
    var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36]; 
    // hide all containers first 
    jQuery.each(arr, function() { 
     $('#toggle' + this + 'Container').hide(); 
    }); 
    // now the toggle buttons 
    jQuery.each(arr, function() { 
     $('#toggle' + this).click(function() { 
      // this line is not working 
      $('#toggle' + this + 'Container').slideToggle('slow'); 
      // and this just changes the toggle button from + to - 
      if ($(this).html() == '+') { 
       $(this).html('-'); 
      } else { 
       $(this).html('+'); 
      } 
     }); 
    }); 
}); 

它的工作原理除了來回切換部分(我補充說,不工作線以上的評論)。問題在哪裏?

回答

2

我會按照mgroves的做法,但如果你真的想要做的陣列的事情,或者只是想弄清楚如何使用每個()正確,這裏是你應該如何使用它:最近

$(document).ready(function() { 
    // array of numbers, it's pretty redundant, there will never be more than 30 containers 
    var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36]; 
    // hide all containers first 
    jQuery.each(arr, function(index, item) { 
     $('#toggle' + item + 'Container').hide(); 
    }); 
    // now the toggle buttons 
    jQuery.each(arr, function(index, item) { 
     $('#toggle' + item).click(function() { 
      // this line is not working 
      $('#toggle' + item + 'Container').slideToggle('slow'); 
      // and this just changes the toggle button from + to - 
      if ($(this).html() == '+') { 
       $(this).html('-'); 
      } else { 
       $(this).html('+'); 
      } 
     }); 
    }); 
}); 
5

這是因爲「this」現在處於不同的範圍,並且指的是實際的#toggleN DOM元素,而不是數組中的數字之一。

我建議你溝號數組,並使用不同的選擇,是這樣的:


$("div[id^=toggle][id$=container]").hide(); 

$("span[id^=toggle]").click(function() { 
    $(this).find("span[id^=toggle][id$=container]").slideToggle("slow"); 
    // .. do your other html stuff 
} 

只是溝渠中那些eachs並更換與切換選擇器。

+1

小錯字在`find`電話,你有相當^比^ = – 2009-07-16 17:17:48

+0

謝謝 - 修正 – 2009-07-16 17:24:30

1

我建議把一個類上的切換按鈕(跨度),如「toggler」等「容器」或東西你撥動容器,以簡化您的javascript:

$(function() { 
    // hide all containers first 
    $(".container").hide(); 
    // now the toggle buttons 
    $(".toggler").click(function() { 
      var container = $("#" + $(this).attr("id") + "Container"); 
      container.slideToggle("slow"); 

      $(this).html(container.is(":visible") ? "-" : "+"); 
    }); 
}); 

把那一個鏡頭。

1

正如mgroves所說,你的範圍是通過使用each()來獲得所有的頂點。有關更多信息,請參閱this

2

編輯

我喜歡你的特定用例mgroves更好的解決方案,但我會留下我的答案了這解釋瞭如何接受指數與元素的。每個方法

參數

原來的答案

正如其他人所說的背景下,這個是不是你認爲它是在t他指出你在引用它。這是雷米夏普撰寫的一篇很棒的文章,標題爲「jQuery's this: demystified」,我建議你閱讀。

.each函數可以接受兩個參數,這將大大幫助你,你不需要這個數組數組。

$('span[id^=toggle']').each(function(idx, elem) { 

    // idx is the current index of the jQuery object 
    $('#toggle' + idx).click(function() { 

     // elem is the current element 
     $(elem).next('#toggle' + idx + 'Container').slideToggle('slow'); 

     if ($(elem).html() == '+') { 
      $(elem).html('-'); 
     } else { 
      $(elem).html('+'); 
     } 

    }); 

}); 
1

我正準備發佈一些關於使用一個類的問題。我只會提高他用這更容易選擇建議,找到容器:

$(function() { 
    // hide all containers first 
    $(".container").hide(); 
    // now the toggle buttons 
    $(".toggler").click(function() { 
    $(this).next().slideToggle("slow"); 

    if (container.is(":visible")) { 
     $(this).html("-"); 
    } 
    else { 
     $(this).html("+"); 
    } 
    }); 
}); 

如果您不能輕易得到的跨度類,你也許可以用類似$('構造一個類似的選擇#SpanContainer > span')從標籤名稱中選擇它們,從它們的包含元素中降序。

0

我就像這樣寫了一個相當重要的行爲腳本。我採用了一個稍微不同的路線,因爲我選擇將包含給定hide/show元素的所有元素包含在包含div中。它可以讓你在一個部分有多個「觸發器」,如果你需要的話,你可以添加任意數量的hide/show元素,而不用擔心編號。我將其結構是這樣的:

<div class="expSecWrapper"> 
    <div class="expSecTrigger">Insert Trigger Here</div> 
    <div class="expSecBody"> 
     Content to hide/show 
    </div> 
</div> 

然後jQuery代碼會是這樣的:

$(document).ready(function(){ 
    var targets = $(".expSecWrapper") 
    targets.find(".expSecTrigger").click(function(){ 
     targets.find(".expSecBody").hide() 
     $(this).parents(".expSecWrapper").eq(0).children(".expSecBody").toggle(); 
    }) 
}) 

你可以在剩下的相關JS添加您的應用程序。

它有一些限制,比如hide/show body是包裝的直接後代的必要性。它可以應用於下拉菜單,單選按鈕等等。它也可以嵌套,所以如果隱藏/顯示你可以有多個層次。

最後一件事情是,您甚至不需要使用.each迭代器來分配該行爲。像.click()這樣的東西會將行爲分配給整個jQuery對象組。只要你使用一個可以抓住你所有目標的選擇器。

對不起,不得不編輯幾次。

0

你應該給你的元素一個可以搜索的類,然後使用next

讓您的標記是這樣的:

<span class="toggleButton">+</span> 
<div class="toggleContainer"> 
    blablabla... 
<div> 

現在,你的代碼來處理這成爲像這樣簡單:

$('.toggleButton').click(function() { 
    $(this).next('.toggleContainer').slideToggle('slow'); 
});