CODEWITHSUNDEEP
jquerycssjquery-ui
Gery
Gery

Reputation: 147

jQuery switchClass() doesn't work with CSS :after selector

JSFiddle demo

If you go to watch the jsfiddle demo and try it you can see the blue bordered div is go away as I want but the the text "Opened" won't changed to "Closed" in the switchClass(). (If I use other kind of css elements and not :after selector than the switchClass() is works fine)

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]";
}

How can I change the text?

Or the switchClass() and the css :after selector do not cooperate?

Upvotes: 1

Views: 661

Answers (5)

Vaclovas
Vaclovas

Reputation: 31

Try this: 

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

Upvotes: 1

RedDevil79
RedDevil79

Reputation: 445

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

Upvotes: 1

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

The code is missing the . for the class selector and once toggled the class is toggling right back to the original. The following example introduces a new class on the div to avoid conflicts and utilizes a conditional statement to determine how the CSS class should be toggled.

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

Working Example: http://jsfiddle.net/ys54w/9/

Upvotes: 2

toomanyredirects
toomanyredirects

Reputation: 2002

Ok, couple of problems here.

  • Firstly, your selector is wrong for the object you're running switchClass on. Since you're running it on what you clicked you can just use $(this).
  • Secondly, you're trying to switch and then you switch straight back again on every click. You need to only do the relevant switchClass on each click.

Try this:

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

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

You are not checking whether that class exist in dom or not.and you are directly firing 2 switch class events.that way it wont work.

you need to check that what class exist first and do switchclass accordingly.

    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

Upvotes: 1

Related Questions