0

親指がクリックされたときに画像を読み込もうとしています。ユーザーは次をクリックします。

<li><a href="#" class="01"><img src="images/thumbimg1.jpg" alt="thumbnail 1" /></a></li>

そして、私が使用しているjQueryは次のとおりです。

var divs = $('#img01, #img02, #img03, #img04, #img05, #img06, #img07, #img08, #img09, #img10');
var classNumber = $(this).attr('class');
var thumb = 'thumb';
var html = '.html';
$(divs).hide();

//$("#img01" + $(this).attr("class")).load(thumb+number+html).fadeIn();

$('ul#thumbs li a').click(function(){
    $(divs).hide();
    $('#img' + $(this).attr('class')).load(thumb+classNumber+html).fadeIn();
});
});

コンソールを見ると、classNumberは未定義として戻ってきます。

console.log（this）;を実行すると 正しいクラスを表示する正しいリンクをクリックすると、なぜ未定義になるのかわかりません。

ありがとう。

4

2 に答える 2

1

あなたのclassNumber変数は、aクリックされた特定の範囲外で宣言されています。代わりに、クリックハンドラー内で定義する必要があります。

$('ul#thumbs li a').click(function(){
    var classNumber = $(this).attr('class');

    $(divs).hide();
    $('#img' + $(this).attr('class')).load(thumb+classNumber+html).fadeIn();
});

classFWIW、後で他のクラスを追加すると壊れてしまうため、ではなく別の属性を選択することをお勧めします。カスタム属性（data-*）を使用するか、。などの別の属性を盗みますtitle。

また、すべてのに共通のクラスを追加し、それぞれを個別に呼び出すのではなく#img、単に呼び出すことを検討することもできます。$(.your-common-class)

于 2013-03-03T10:50:03.847 に答える
1

次の理由で未定義になっています：

var classNumber = $(this).attr('class');

はループの外側にバインドされているため、これは要素を参照せず、代わりにウィンドウを参照します。上記のコードでは、これを効果的に実行しようとしています。

var classNumber = $(window).attr('class');

代わりにこれを行う必要があります：

$('ul#thumbs li a').click(function(){
    var classNumber = $(this).attr('class');
    $(divs).hide();
    $('#img' + $(this).attr('class')).load(thumb+classNumber+html).fadeIn();
});
于 2013-03-03T10:55:14.393 に答える