jQuery switchClass() 不适用于 CSS :after selector

Question

JSFiddle demo

如果你去看 jsfiddle 演示并尝试一下，你可以看到蓝色边框的 div 按照我的意愿消失了，但 switchClass() 中的文本“Opened”不会更改为“Closed”。 (如果我使用其他类型的 css 元素而不是 :after 选择器，则 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 选择器不配合？

Answer 1

代码缺少类选择器的 .，一旦切换，类就会立即切换回原始状态。以下示例在 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;
    });
});

工作示例:http://jsfiddle.net/ys54w/9/