JQuery - ID未定義。在函數中使用動態ID？

Question

我在獲取腳本在CMS內工作時遇到了一些問題。這是一個相對簡單的jQuery顯示/隱藏，工作正常，直到我需要在一個頁面上多次使用它。我試圖將其轉換爲使用每個DIV的個人ID，但現在它在Firebug中返回錯誤說

ID未定義。

jQuery的

$('.articleSlide').each(function() { 
var current = $(this); 
current.attr("box_h", current.height()); 


$(".articleSlide").css("height", "250px"); 
$(".showHide").html('<a href="#">More</a>'); 
$(".showHide a").attr("href", "javascript:void(0)"); 
$(".showHide a").click(function() { openSlider() }) 

}); 

function openSlider() 

{ 
    var open_height = $("#articleSlide_" + id).attr("box_h") + "px"; 
    $("#articleSlide_" + id).animate({"height": open_height}, {duration: "slow" }); 
    $(".showHide").html('<a href="#">More</a>'); 
    $(".showHide a").click(function() { closeSlider() }) 
} 

function closeSlider() 

{ 
    $("#articleSlide_" + id).animate({"height": "250px"}, {duration: "slow" }); 
    $(".showHide").html('<a href="#">More</a>'); 
    $(".showHide a").click(function() { openSlider() }) 
} 

HTML

<div class="articleSlide" id="articleSlide_1"> 
    <p>We work closely with clients to provide effective solutions for a wide variety of products and applications through brand creation and management, video and motion graphics, marketing and advertising, digital and editorial.</p> 
    <p>We understand markets and how to communicate in a multi-platform environment.We work closely with clients to provide effective solutions for a wide variety of products and applications through brand creation and management, video and motion graphics, marketing and advertising, digital and editorial.</p> 
</div> 
<div class="showHide"> 

編輯

OK，我想我誤解了ID位我包括在內。我基本上希望它能夠拿起每個顯示/隱藏div的個人ID，所以它只能打開那個。這是我目前劇本的作品，但如果你在頁面上有多個DIV它打開和關閉所有這些

$(".articleSlide").each(function() { 
var current = $(this); 
current.attr("box_h", current.height()); 


$(".articleSlide").css("height", "250px"); 
$(".showHide").html('<a href="#">More</a>'); 
$(".showHide a").attr("href", "javascript:void(0)"); 
$(".showHide a").click(function() { openSlider() }) 


}); 

function openSlider() 

{ 
    var open_height = $(".articleSlide").attr("box_h") + "px"; 
    $(".articleSlide").animate({"height": open_height}, {duration: "slow" }); 
    $(".showHide").html('<a href="#">More</a>'); 
    $(".showHide a").click(function() { closeSlider() }) 
} 

function closeSlider() 

{ 
    $(".articleSlide").animate({"height": "250px"}, {duration: "slow" }); 
    $(".showHide").html('<a href="#">More</a>'); 
    $(".showHide a").click(function() { openSlider() }) 
} 
    <a href="#">More</a> 
</div> 

Answer 1

錯誤很明顯。您使用變量id但似乎從未定義它。

也許你意味着openSlider()採取的id參數，併爲您的.each處理器來傳遞$(this).attr('id)到openSlider()。

同爲closeSlider()。

例子：

$('.articleSlide').each(function() { 
    var current = $(this); 
    current.attr("box_h", current.height()); 
    $(".articleSlide").css("height", "250px"); 
    $(".showHide").html('<a href="#">More</a>'); 
    $(".showHide a").attr("href", "javascript:void(0)"); 
    $(".showHide a").click(function() { openSlider(current.attr('id')) }) 
}); 

function openSlider(id) { 
    var open_height = $("#articleSlide_" + id).attr("box_h") + "px"; 
    $("#articleSlide_" + id).animate({"height": open_height}, {duration: "slow" }); 
    $(".showHide").html('<a href="#">More</a>'); 
    $(".showHide a").click(function() { closeSlider(id) }) 
} 

function closeSlider(id) { 
    $("#articleSlide_" + id).animate({"height": "250px"}, {duration: "slow" }); 
    $(".showHide").html('<a href="#">More</a>'); 
    $(".showHide a").click(function() { openSlider(id) }) 
} 

Answer 2

function openSlider() 
{ 
    var open_height = $("#articleSlide_" + id).attr("box_h") + "px"; 

在最後一行，什麼是id應該是什麼？

你已經得到了同樣的問題在這裏：

function closeSlider() 
{ 
    $("#articleSlide_" + id).animate({"height": "250px"}, {duration: "slow" }); 

您需要修改這兩個函數取一個參數指定的元素上工作（通過ID，如元素本身，或一個jQuery對象）並更改id表達式以適當地引用該參數。

不要忘了改線

$(".showHide a").click(function() { openSlider() }) 

和

$(".showHide a").click(function() { closeSlider() }) 

通過這個參數。

Answer 3

在這條線：

function openSlider() 
{ 
    var open_height = $("#articleSlide_" + id).attr("box_h") + "px"; 

時，你有沒有定義變量id是什麼？

Answer 4

$（ 「＃articleSlide_」 + ID）應該更有可能成爲$（ 「＃articleSlide_」 +電流。ID）

Answer 5

我無法得到您的情況的完整圖片（我不好），但這裏是我覺得是你需要的東西...否則，讓我知道，我會更新反映你需要什麼。

假設下面的標記，

<div id=articlesContainer> 

    <div class=articleSlide> 
     <p>Crappety crappety crap!</p> 
     <p>Feed me moar crap!</p> 
    </div> 
    <a class=showHideArticle>More...</a> 

    <div class=articleSlide> 
     <p>Crappety crappety crap!</p> 
     <p>Feed me moar crap!</p> 
    </div> 
    <a class=showHideArticle>More...</a> 

</div> 

和JavaScript

$('a.showHideArticle').click(function (e) { 
    $(this).prev().slideToggle('slow'); 
}); 

或（我個人最喜歡的）

$('#articlesContainer').delegate('a.showHideArticle', 'click', function (e) { 
    $(this).prev().slideToggle('slow'); 
}); 

這是在表現相對更好，而且會也可以動態添加文章！

有了這個，只要你點擊一個.showHideArticle，相應.articleSlide應該切換着，當然用一個漂亮的幻燈片動畫;）

編輯：噢，如果你想使用openSlider和closeSlider功能（唐不知道爲什麼你會喜歡），那麼你可以檢查.articleSlide是否已經可見，通過使用if ($(this).is(':visible'))並相應地調用openSlider或closeSlider。