ユーザーがリンクをクリックすると、そのリンクのコンテナにクラスがactive
割り当てられているかどうかを確認しようとしています。
しかし、ブラウザによって視覚スタイルが適用されている間、クリックがトリガーされたときにそのクラスの割り当てが表示されないため、スコープに問題があると思います。
問題を複製するjsfiddleを作成しました。悟りは大歓迎です。
ユーザーがリンクをクリックすると、そのリンクのコンテナにクラスがactive
割り当てられているかどうかを確認しようとしています。
しかし、ブラウザによって視覚スタイルが適用されている間、クリックがトリガーされたときにそのクラスの割り当てが表示されないため、スコープに問題があると思います。
問題を複製するjsfiddleを作成しました。悟りは大歓迎です。
$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();
});
});
またはあなたは使用することができます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'));
});
var
1つの解決策は、キーワードを使用して変数のスコープを縮小することです。
$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スコープについてのこの素晴らしい投稿をチェックしてください。
次のように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'));
});
可能なメニューの別のアプローチは次のとおりです。http: //jsfiddle.net/earthdesigner/7uxcg/1/
javascriptの部分:
$(document).ready(function(){
$('nav a').click(function(){
$('nav li').removeClass('active');
$(this).parent().addClass('active');
})
});