1

JSFiddleデモ

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セレクターが連携しませんか？

4

5 に答える 5

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

実例：http：//jsfiddle.net/ys54w/9/

于 2013-02-21T10:31:09.777 に答える
1

わかりました、ここでいくつかの問題があります。

  • まず、switchClassを実行しているオブジェクトのセレクターが間違っています。クリックしたもので実行しているので、を使用できます$(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;
  });
});
于 2013-02-21T10:36:28.107 に答える
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);
       });
   });
于 2013-02-21T10:37:02.637 に答える
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;
});
});
于 2013-02-21T10:37:08.393 に答える
1

そのクラスがdomに存在するかどうかを確認しておらず、2つのスイッチクラスイベントを直接発生させているため、機能しません。

最初にどのクラスが存在するかを確認し、それに応じてswitchclassを実行する必要があります。

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

作業デモ

于 2013-02-21T10:36:08.297 に答える