问题描述
|
以下代码是我正在使用的代码:
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