jQuery在多个Divs上切换文本

如何解决jQuery在多个Divs上切换文本

| 以下代码是我正在使用的代码： jQuery的：

jQuery(\'#slickBox3242\').hide();
jQuery(\'#slickBox3243\').hide();
jQuery(\'#slickBox3244\').hide();

jQuery.fn.fadetoggle = function(speed,easing,callback) {
return this.animate({opacity: \'toggle\'},speed,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个这些链接！     

解决方法

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

<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();

尽管我更喜欢第一种方法，但是如果以后再添加更多的div标识符，则不必担心将更多的div标识符添加到.hide（）函数中。只要确保您在新的div中添加class = \“ content \”     ,        尝试这个：

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

类似的问题->更改jQuery中链接的标题     ,        解决方案可能是以下几种： jQuery的

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

jQuery.fn.fadeToggle = function(speed,easing,callback) {
return this.animate({opacity: \'toggle\'},speed,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