0

ユーザーがリンクをクリックすると、そのリンクのコンテナにクラスがactive割り当てられているかどうかを確認しようとしています。

しかし、ブラウザによって視覚スタイルが適用されている間、クリックがトリガーされたときにそのクラスの割り当てが表示されないため、スコープに問題があると思います。

問題を複製するjsfiddleを作成しました。悟りは大歓迎です。

4

5 に答える 5

0

$linkハンドラー内の迷惑な関数の範囲外です。$(this)代わりに、クリックハンドラー内で使用する必要があります。

$links.each( function(i) {
    $link = $(this);
    $link.click( function(e) {
        e.preventDefault();
        console.log('L' + i + ': ' + $(this).parent().hasClass('active'));
    });
});

更新されたjsFiddleを参照してください。


$(this)たとえば、を使用せずにこれを解決する必要がある場合は、イベントデータを使用してクロージャとして機能させることもできます。

$links.each( function(i) {
    $link = $(this);
    $link.click({ link : $link }, function(e) {
        e.preventDefault();
        //console.log('L' + i + ': ' + $(this).parent().hasClass('active'));
        e.data.link.parent();
    });
});
于 2013-02-27T13:26:36.247 に答える
0

またはあなたは使用することができますon

$controls.on("click", "a", function(e) {
    e.preventDefault();
    var theParent = $(this).parent();
    //if you need 'i' here it is
    var i = $.inArray(theParent[0], $controls);
    console.log('L' + i + ': ' + theParent.hasClass('active'));
});

http://jsfiddle.net/F69nh/6/

于 2013-02-27T13:36:59.140 に答える
0

var1つの解決策は、キーワードを使用して変数のスコープを縮小することです。

$links.each(function () {
    var $link = $(this);
    ...
});

グローバルスコープのデモ:

var a = 1;
function f(v) { a = v; };
console.log(a); // 1
f(2);
console.log(a); // 2

ローカルスコープのデモ:

var a = 1;
function f(v) { var a = v; };
console.log(a); // 1
f(2);
console.log(a); // 1

javascriptスコープについてのこの素晴らしい投稿をチェックしてください。

于 2013-02-27T13:37:20.177 に答える
0

次のようにJavaScriptを簡略化します。

var $controls = $('#controls li');
var $links = $('a', $controls);
var $control, $link;

$controls.each( function(i) {
    $control = $(this);
    if (i == 0) {
        $control.addClass('active');
    }
    console.log('C' + i + ': ' + $control.hasClass('active'));
});

$links.click(function(e) {
    e.preventDefault();
    console.log('L' + $(this).index() + ': ' + $(this).parent().hasClass('active'));
});
于 2013-02-27T13:45:00.393 に答える
-1

可能なメニューの別のアプローチは次のとおりです。http: //jsfiddle.net/earthdesigner/7uxcg/1/

javascriptの部分:

$(document).ready(function(){
    $('nav a').click(function(){
        $('nav li').removeClass('active');
        $(this).parent().addClass('active');
    })  
});
于 2013-02-27T13:40:05.197 に答える