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

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

尝试

$('.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

就像现在一样，您没有将click事件绑定到从start开始选择的链接。

我会改变：

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

到

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

切换元素jquery

3 个答案: