0

1ページに3つのaタグがあります。ユーザーは1つだけ「選択」できます。マークアップ：

<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');
    });

このコードは正しく機能しません。最初または2番目のタグを選択すると、すべてOK-スタイルが切り替わりますが、とにかくアラートが表示されます。最初に選択すると、最後を選択できません。
問題はどこにあり、その理由は何ですか？
ありがとう。

デモ

4

3 に答える 3

1

クリックハンドラーを最後の要素にバインドしないためです。

試す

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

フィルタは1find回だけ実行され、連続するクリックをリッスンしません。これにはイベント委任を使用します。これにより、現在のようにイベントをバインドするときではなく、クリックが発生したときにフィルターが適用されます。

$('.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 に答える
1

現在のように、クリックイベントを最初から選択されたリンクにバインドしていません。

私なら、変えるね：

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

に

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