toggle元素jquery

Question

我在頁面上有三個a標籤。用戶只能「選擇」一個。 標記：

<div class="fl_near"> 
    <span class="title">title</span> 
    <p> 
    <a id="filter_today" class="first_tb" style="display: block"> 
     <span>text1</span> 
    </a> 
    <a id="filter_tomorrow"> 
     <span>text2</span> 
    </a> 
    <a id="filter_afterTomorrow" class="last_tb selected" style="display: block"> 
     <span>text3</span> 
    </a> 
    </p> 
</div> 

JS代碼：

$('.fl_near').find('a:not(.selected)').click(function() { 
    alert('1'); 
     $('.fl_near').find('a').removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 

此代碼不能正常工作。如果我選擇第一個或第二個標籤，那麼所有OK樣式都會切換，但無論如何都會顯示警告。如果我先選擇然後我不能選擇最後一個。
問題在哪裏，爲什麼？
謝謝。

DEMO

Answer 1

因爲你不綁定單擊處理程序的最後一個元素。

嘗試

$('.fl_near a').click(function() { 
    $(this).addClass('selected').siblings().removeClass('selected'); 
});​ 

Answer 2

的find過濾器只運行一次 - 它沒有偵聽連續點擊。使用事件委託來實現 - 這種過濾器將在點擊發生時應用，而不是像當前那樣綁定事件。

$('.fl_near').on('click', 'a:not(.selected)', function (evt) { 
    alert(1); 
    $(this).addClass('selected').siblings('a').removeClass('selected'); 
}); 

請注意，我還簡化了您的添加/刪除類行。

Answer 3

現在，您並未將點擊事件綁定到從start開始選擇的鏈接。

我會改變：

$('.fl_near').find('a:not(.selected)').click(function() { 

到

$('.fl_near a').click(function() {