1

次の例があります。

<div class="filtrer">
    <a class="bold">Url 1</a>
    <a>Url 2</a>
</div>

最初の URL はアクティブ、2 番目は非アクティブ、太字は選択されていることを意味します。Url 2 のみを押すことを許可する必要があります。それを行うとすぐに、太字のクラスが Url 2 に切り替わります。

私がすでに試してうまくいかなかったのはこれでした：

$('.filtrer a').filter(':not(.bold)').on('click', function(){
    var current = $('.filtrer a').filter(':not(.bold)');
    var standby = $('.filtrer a.bold');

    current.addClass('bold');
    standby.removeClass('bold');
})

これが機能しない理由を誰かが知っていますか? または、最適化されたソリューションがありますか? ありがとう

4

5 に答える 5

5

動的要素セレクターを扱っているため、委任ベースのイベント ハンドラーを使用する必要があります。

var $as = $('.filter a');
$('.filter').on('click', 'a:not(.bold)', function () {
    var current = $as.filter(':not(.bold)');
    var standby = $as.filter('.bold');

    current.addClass('bold');
    standby.removeClass('bold');
})

デモ:フィドル

次のように書くことができます

var $as = $('.filter a');
$('.filter').on('click', 'a:not(.bold)', function () {
    $as.toggleClass('bold');
})

デモ:フィドル

于 2013-11-14T15:55:14.643 に答える
1 
$('.filter').on('click','a:not(.bold)',function(){
  $(this).siblings().add(this).toggleClass('bold');
});

またはjQueryなし：

<div class="filter">
  <input type="radio" name="url" id="url1"><label for="url1">url1</label>
  <input type="radio" name="url" id="url2"><label for="url2">url2</label>
</div>


.filter input[type=radio]{
  display:none;
}
.filter input[type=radio]:checked + label{
  font-weight:bold;
}

例 1 例 2

于 2013-11-14T16:09:15.213 に答える
0 
$('.filtrer').on('click',' a:not(.bold)', function(){    
    $('.filtrer a.bold').removeClass('bold');;
    $(this).addClass('bold');    
})
于 2013-11-14T15:57:21.910 に答える
0

「filter」のスペルを間違えました。コードまたは HTML で変更してください。

于 2013-11-14T15:56:15.910 に答える
0

何かのようなもの ：

$('.filter a').click(function() {
    $('.filter a').removeClass('bold');
    $(this).addClass('bold');
});

?

于 2013-11-14T15:59:13.690 に答える