Question

我有以下内容：

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，我就应该将其移除。

但由于某种原因，该课仍然留在其他瓷砖中。

可能是什么问题？

Answer 1

您的选择器中有错误

$('#content twelvecol > a')

应该是

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

由于后者选择的容器是容器中的顶级子容器，其类为 twelvecol，它本身位于id为content的元素内。

Answer 2

您的代码不正确。你遗漏了twelvecol班的一个点。

修改以下部分，对于单击功能：

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

Answer 3

不仅缺少点，而且还缺少>。它应该是：

$('#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/

为什么removeClass在这种情况下不起作用？

3 个答案: