爲什麼removeClass在這種情況下不起作用？

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')將不參考預期股利。它應該是$('#a > .b > .c')或$('#a > div > .c')。

在此處查看演示：http://jsfiddle.net/S2JV3/1/