0

私は次のものを持っています：

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>

したがって、一方をクリックすると.selected-tile、もう一方から削除する必要があります。.tile

しかし、何らかの理由で、クラスはまだ他のタイルに残っています。

何が問題なのですか？

4

3 に答える 3

7

セレクターにバグがあります

$('#content twelvecol > a')

する必要があります

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

後者は、クラスが12colのコンテナ内の最上位の子であるアンカーを選択するため、それ自体が id の要素内にありcontentます。

于 2013-02-06T06:24:00.680 に答える
1

あなたのコードは正しくありません。twelvecolクラスのドットがありません。

クリック機能の両方について、以下の部分を変更します。

$('#content .twelvecol > a').removeClass('selected-tile');
于 2013-02-06T06:26:08.170 に答える
1

ドットが欠けているだけでなく、 も>欠けています。そのはず：

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

>孫ではなく、子要素のみです。

あなたが持っている場合：

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

$('#a > .c')予想される div を参照しません。$('#a > .b > .c')または$('#a > div > .c')代わりにする必要があります。

ここでデモを参照してください: http://jsfiddle.net/S2JV3/1/

于 2013-02-06T06:33:09.950 に答える