Question

我正在使用以下代码：

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的初始状态是隐藏的，文本应该是“Show Sales Org”，然后当它可见时，文本应该是“Hide Sales Org”。

我已经看到了可以使用span的地方，但我是jQuery的新手，我还没有看到如何设置特定于要更改的链接的文本。我最多有5个链接！

Answer 1

试试这个：

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

类似的问题 - ＆gt; Changing the title of a link in jQuery

Answer 2

索引和关系属性在这里很有用：

<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标识符。只需确保在新div中添加class =“content”

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

jQuery在多个Div上切换文本

3 个答案: