如果您去观看jsfiddle演示并尝试它,您可以看到蓝色边框div已经消失,但在switchClass()中文本“Opened”不会更改为“Closed”。 (如果我使用其他种类的css元素而不是:选择器之后比switchClass()工作正常)
HTML:
<div class="filter_title">
<div class="filter_title_price" id="filter_price_toggle"><span>Price</span>
</div>
</div>
<div class="hideprice" style="margin-top:10px; border:1px solid blue;">If you click Price [Opened] I will go away :) but the text "Opened" won't change to text "Closed"</div>
JS:
$(function () {
$("#filter_price_toggle").click(function () {
$(".hideprice").toggle("blind", 250);
$("filter_title_price").switchClass("filter_title_price", "filter_title_price2", 250);
$("filter_title_price2").switchClass("filter_title_price2", "filter_title_price", 250);
return false;
});
});
CSS:
.filter_title {
font-weight:bold;
padding: 3px 10px;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
background-color: #f6f6f6;
margin-top:5px;
}
.filter_title_price:after {
content:"[Opened]";
}
.filter_title_price2:after {
content:"[Closed]";
}
如何更改文字?
或者switchClass()和css:after选择器不合作?
答案 0 :(得分:2)
代码缺少类选择器的.
,一旦切换类,就会切换回原来的类。以下示例在div
上引入了一个新类以避免冲突,并使用条件语句来确定应如何切换CSS类。
<强> HTML 强>
<div class="filter_title">
<div class="hook filter_title_price" id="filter_price_toggle"><span>Price</span>
</div>
</div>
<div class="hideprice" style="margin-top:10px; border:1px solid blue;">If you click Price [Opened] I will go away :) but the text "Opened" won't change to text "Closed"</div>
<强>的Javascript 强>
$(function () {
$("#filter_price_toggle").click(function () {
$(".hideprice").toggle("blind", 250);
if($(".hook").hasClass("filter_title_price")){
$(".hook").switchClass("filter_title_price", "filter_title_price2", 250);
}else{
$(".hook").switchClass("filter_title_price2", "filter_title_price", 250);
}
return false;
});
});
答案 1 :(得分:1)
你没有检查那个类是否存在于dom中。你正在直接触发2个switch类事件。这样它就不会工作。
你需要先检查哪个类存在,然后相应地切换类。
if($(this).attr("class")=="filter_title_price")
$(this).switchClass("filter_title_price", "filter_title_price2", 250);
else
$(this).switchClass("filter_title_price2", "filter_title_price", 250);
<强> Working Demo 强>
答案 2 :(得分:1)
好的,这里有几个问题。
$(this)
。switchClass
。试试这个:
$(function () {
$("#filter_price_toggle").click(function () {
$(".hideprice").toggle("blind", 250);
if ($(this).hasClass("filter_title_price"))
$(this).switchClass("filter_title_price", "filter_title_price2", 250);
else
$(this).switchClass("filter_title_price2", "filter_title_price", 250);
return false;
});
});
答案 3 :(得分:1)
试试这个:
$(function () {
$("#filter_price_toggle").on('click', function () {
var element = $(this);
$(".hideprice").toggle("blind", 250);
element.hasClass("filter_title_price") ? element.switchClass("filter_title_price", "filter_title_price2", 250) : element.switchClass("filter_title_price2", "filter_title_price", 250);
});
});
答案 4 :(得分:1)
试试这个javascript:
$(function () {
$("#filter_price_toggle").click(function () {
$(".hideprice").toggle("blind", 250);
if($(this).hasClass('filter_title_price'))
$(".filter_title_price").switchClass("filter_title_price", "filter_title_price2", 250);
else
$(".filter_title_price2").switchClass("filter_title_price2", "filter_title_price", 250);
return false;
});
});