0

私はこれに頭を包むことができないようです：http://jsfiddle.net/pvyaL/

    $(function () {
        if (!$(this).hasClass('selected')) {
            $('.navigation li').hover(function () {
                $(this).find('a').attr('class', 'hovering');
            },
            function () {
                $(this).find('a').attr('class', '');
            });
        };
    });

基本的に私が望むのは、要素に既に特定のクラスがある場合 (この場合は「選択済み」)、ホバー クラスの変更を無視することです。

私は何が欠けていますか？

4

3 に答える 3

3

そのコードにはいくつかの間違いがあります:

  • this要素ではなく、ドキュメントを参照しますli。
  • でクラスを設定する.attrのは本当に悪い選択です --そしてまさにこの目的のために存在しますaddClass。removeClasstoggleClass
  • 純粋な CSS で実行できるため、jQuery は必要ありません。

jQueryフォームでは、あなたが望むものはもっと似ています

$('.navigation li:not(.selected)').hover(
function () {
    $(this).find('a').addClass('hovering');
},
function () {
    $(this).find('a').removeClass('hovering');
});

selectedスクリプトをクラスの変更に動的に応答させたい場合は、別のバージョンが解決策になります。

$('.navigation li').hover(
function () {
    if(!$(this).hasClass('selected')) $(this).find('a').addClass('hovering');
},
function () {
    if(!$(this).hasClass('selected')) $(this).find('a').removeClass('hovering');
});

もちろん、jQuery でこれを行う理由はありません。純粋な CSS で十分です。

.navigation li:not(.selected):hover a {
    /* your styles go here */
}

セレクターは IE8 ではサポートされていませんが、それが問題である場合は、 set/revoke トリック:notを使用して回避できます。

于 2013-08-06T08:27:33.380 に答える
0

試す

$(function() {
    $('.navigation').on('mouseenter', 'li:not(.selected)', function() {
        $(this).find('a').attr('class', 'hovering');
    }).on('mouseleave', 'li:not(.selected)', function() {
        $(this).find('a').attr('class', '');
    })
});

また

$(function() {
    $('.navigation li').hover(function() {
        if (!$(this).hasClass('selected')) {
            $(this).find('a').attr('class', 'hovering');
        }
    }, function() {
        if (!$(this).hasClass('selected')) {
            $(this).find('a').attr('class', '');
        }
    });
});
于 2013-08-06T08:27:46.620 に答える
0

$(this)あなたのコードには「何もありません」、http://jsfiddle.net/pvyaL/2/を見てください

これも変更しました：

if (!$(this).find('a').hasClass('selected')) {

したがって、小切手は<a>ではなく にあります<li>

于 2013-08-06T08:30:04.927 に答える