0

ループしないforループステートメントがあります。コードは次のとおりです。

$(document).ready(function(){
    for(var i=1;i<=30;i++){
        $('img[alt="sample'+i+'"]').click(function(){
            var changeImage = $('img[alt="sample'+i+'"]').attr('src');
            var changeText = $('img[alt="sample'+i+'"]').attr('alt');
            $('img[alt="main image"]').attr('src', changeImage);
            $('h4#imageTitleHead').text(changeText);
        });
    }
});

ループしiません。ソースコードを確認してもコードは同じです。このように、番号は$('img[alt="sample'+i+'"]')変更されず、まったくループしませんでした。助けてください。よろしくお願いします。

4

4 に答える 4

1

あなたがこれを行うことができる場合、なぜループを行うのですか：

まず、画像に任意のクラスを追加しますalt(sample[NUMBER]例: loopImages):

<img src="image.png" alt="sample1" class="loopImages">

さて、コード：

$(document).ready(function(){
    $('img.loopImages').click(function(){
        var current = $(this);
        var changeImage = current.attr('src');
        var changeText = current.attr('alt');

        $('img[alt="main image"]').attr('src', changeImage);
        $('h4#imageTitleHead').text(changeText);
    });
});
于 2012-09-23T06:09:33.067 に答える
1

iループとコールバック関数の間の面倒です。i提供される変数は 1 つだけで、ループの最後の反復後に 31 になります。しかし、jQuery は、クリックされたオブジェクトにコンテキスト オブジェクト (別名 ) としてアクセスする便利な方法を提供しますthis。

$(document).ready(function() {
  for (var i = 1; i <= 30; i++){
    $('img[alt="sample'+i+'"]').click(function() {
      var clickedObject = $(this); // wrap it in a jquery
      var changeImage = clickedObject.attr('src');
      var changeText = clickedObject.attr('alt');
      $('img[alt="main image"]').attr('src', changeImage);
      $('h4#imageTitleHead').text(changeText);
    });
  }
});

それはトリックを行う必要があります;）

于 2012-09-23T06:09:38.113 に答える
0

ループ自体は問題ありません... http://jsfiddle.net/

他に何が間違っているか見てみましょう...

待って、気にしないで、編集中

于 2012-09-23T05:54:35.300 に答える
0

これはおそらく、かなり単純なセレクターで解決できます。

これは次のようになります。

$('img[alt*="sample"]')...

ループが実行されるたびに関数を再宣言するのではなく、for ループの外側で関数を 1 回記述することもできます。元。：

function bindAllImages(image){
    // same code in here
}

$('img[alt*="sample"]').bind('click', bindAllImages(image);


また、効果を示す JSFiddle もここにあります: http://jsfiddle.net/JYCLA/1/

于 2012-09-23T08:18:22.640 に答える