0

我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 - 样式都会切换，但仍会显示警报。如果我选择第一个，那么我不能选择最后一个。
问题出在哪里，为什么？
谢谢。

演示

4

3 回答 3

1

As it is now, you're not binding the click event to the link that is selected from start.

I would change:

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

to 

$('.fl_near a').click(function () {
于 2012-07-31T08:54:44.073 回答
1

因为您没有将点击处理程序绑定到最后一个元素。

尝试

$('.fl_near a').click(function () {
    $(this).addClass('selected').siblings().removeClass('selected');
});​
于 2012-07-31T08:53:04.820 回答
1

过滤器find只运行一次——它不会监听连续的点击。为此使用事件委托 - 这样过滤器将在单击发生时应用，而不是像当前那样在绑定事件时应用。

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

另请注意，我已经简化了您的 add/remove-class 行。

于 2012-07-31T08:53:33.543 回答