在多個div

Question

下面的代碼jQuery的切換文本是我在用的：

的jQuery：

jQuery('#slickbox3242').hide(); 
jQuery('#slickbox3243').hide(); 
jQuery('#slickbox3244').hide(); 

jQuery.fn.fadeToggle = function(speed, easing, callback) { 
return this.animate({opacity: 'toggle'}, speed, easing, callback); 
}; 

jQuery("a.slick-toggle").click(function() { 
var id = jQuery(this).attr('id'); 
jQuery("#slickbox" + id).fadeToggle({ 
speed:200,easing : "swing"}) 

jQuery(this).text(jQuery(this).text() == 'Show Filters' ? 'Hide Filters' : 'Show Filters'); 
return false; 
}); 

HTML：

<a href="#" id="3242" class="slick-toggle">Show Sales Org Filters</a> 
<div id="slickbox3242" style="overflow:hidden;">Some Content</div> 

<a href="#" id="3243" class="slick-toggle">Show Retail Filters</a> 
<div id="slickbox3243" style="overflow:hidden;"> Some Content</div> 

所以我需要的是幫助如何改變切換後的鏈接文本。例如，slickbox3243的初始狀態是隱藏的，文本應該是「顯示銷售組織」，然後當它可見時，文本應該是「隱藏銷售組織」。

我看過哪裏可以使用跨度，但我是jQuery的新手，我還沒有看到如何設置特定於被更改的鏈接的文本。我有多達5個這些鏈接！

Answer 1

指數和關係屬性在這裏有所幫助：

<a href="#" id="3242" rel='slick1' index=0 class="slick-toggle">Show Sales Org Filters</a> 
<div id="slickbox3242" class='content' rel='slick1' index=0 style="overflow:hidden;">Some Content</div> 

<a href="#" id="3243" rel='slick2' index=0 class="slick-toggle">Show Retail Filters</a> 
<div id="slickbox3243" class='content' rel='slick2' index=0 style="overflow:hidden;"> Some Content</div> 

jQuery的

$("a.slick-toggle").click(function() { 
    var rel = $(this).attr('rel'); 
    //get the text from the <a> and remove the 1st word 
    var text = $(this).text().substr(5); 
    $(".content[rel='" + rel + "']").fadeToggle({speed:200,easing : "swing"}) 
    //use the index attribute to determine if the link has been clicked or not 
    if($(this).attr('index') == 0){ 
     $(this).attr('index',1).text("Hide " + text); 
    } else { 
     $(this).attr('index',0).text("Show " + text); 
    } 
}); 

現在點擊鏈接將切換您的內容，然後檢查索引是什麼。如果索引當前爲0，則將其更改爲1（表示它已被點擊）並將文本更改爲「隱藏[其餘文本]」，反之亦然。

在另一方面 - 以節省空間和時間，只能調用.hide（）函數一次這樣的：

$(".content").hide(); 

或

$("#slickbo3242,#slickbox3243").hide(); 

雖然我更喜歡第一個方法，這種方法如果稍後添加更多內容，則不必擔心在.hide（）函數中添加更多的div標識符。只要確保你添加class = 「內容」 的新的div內

Answer 2

試試這個：

$("#3242").text("Hide Sales Org"); 

類似的問題 - >Changing the title of a link in jQuery

Answer 3

一個解決方案可能是以下幾點：

使用jQuery

jQuery('#slickbox3242').hide(); 
jQuery('#slickbox3243').hide(); 
jQuery('#slickbox3244').hide(); 

jQuery.fn.fadeToggle = function(speed, easing, callback) { 
return this.animate({opacity: 'toggle'}, speed, easing, callback); 
}; 

jQuery("a.slick-toggle").click(function() { 
if($(this).children("span").text() == "Show") { 
    $(this).children("span").text('Hide'); 
     } else { 
     $(this).children("span").text('Show'); 
     } 
var id = jQuery(this).attr('id'); 
jQuery("#slickbox" + id).fadeToggle({ 
speed:200,easing : "swing"}) 


return false; 
}); 

HTML

<a href="#" id="3242" class="slick-toggle"><span>Show</span> Sales Org Filters</a> 
<div id="slickbox3242" style="overflow:hidden;">Some Content</div> 

<a href="#" id="3243" class="slick-toggle"><span>Show</span> Retail Filters</a> 
<div id="slickbox3243" style="overflow:hidden;"> Some Content</div> 

if您檢查span內的文字是顯示還是隱藏改變它。

演示：http://jsbin.com/iseka3