CODEWITHSUNDEEP
jquery
wyc
wyc

Reputation: 55293

Why is removeClass is not working in this case?

I have the following:

JS:

  $('.home-toggle').click(function() {
    scroll();
    $('#content twelvecol > a').removeClass('selected-tile');
    $(this).addClass('selected-tile');
    $('.hidden').hide();
    $('.home-container').slideDown();
  });

  $('.why-toggle').click(function() {
    scroll();
    $('#content twelvecol > a').removeClass('selected-tile');
    $(this).addClass('selected-tile');
    $('.hidden').hide();
    $('.why-container').slideDown();
  });

HTML:

<div id="content" class="container" style="display:none;">
  <div class="row">
    <div class="twelvecol">
      <a href="#" class="home-toggle tile first">
        <img class="tile-top" src="images/tile1.png" alt="" />
        <img class="tile-bottom" src="images/tile1h.png" alt="" />
      </a>
      <a href="#" class="why-toggle tile">
        <img class="tile-top" src="images/tile2.png" alt="" />
        <img class="tile-bottom" src="images/tile2h.png" alt="" />
      </a>
      <a href="#" class="solutions-toggle tile last">
        <img class="tile-top" src="images/tile3.png" alt="" />
        <img class="tile-bottom" src="images/tile3h.png" alt="" />
      </a>

So .selected-tile should be removed from the other .tile once I click on one.

But for some reason, the class still remains in other tiles.

What could be the problem?

Upvotes: 0

Views: 121

Answers (3)

Adam Rackis
Adam Rackis

Reputation: 83366

You have a bug in your selector 

$('#content twelvecol > a')

should be 

$('#content .twelvecol > a')
//          ^ dot

Since the latter selects anchors that are top children inside of a container with a class of twelvecol, which is itself inside of an element with an id of content.

Upvotes: 7

Ovilia
Ovilia

Reputation: 7310

Not only the dot is missing, but also the > is missing. It should be:

$('#content > .row> .twelvecol > a');

> is only for child element, rather than grandchild.

So if you have:

<div id="a">
    <div class="b">
        <div class="c">
        </div>
    </div>
</div>

$('#a > .c') won't refer to the expected div. It should be $('#a > .b > .c') or $('#a > div > .c') instead.

See the demo here: http://jsfiddle.net/S2JV3/1/

Upvotes: 1

palaѕн
palaѕн

Reputation: 73926

Your code is not correct. Your are missing a dot for the twelvecol class.

Modify the below part, for both the click function's:

$('#content .twelvecol > a').removeClass('selected-tile');

Upvotes: 1

Related Questions