配列内の複数のimgのクラスを変更

Question

これは私の最初の投稿です。私はいつもこのページの解決策を見つけました。

最後のプログラムでは.removeClassと.addClassに問題があります。 配列Framesに複数の画像を読み込み、frames[0]にすべて（previous-image）を（current-image）に変更します。ここで私のコードは、それは2番目の画像だけでクラスを変更しています。ここでは、コードです：

function loadImage() { 
    // Creates a new <li> 
    var li = document.createElement("li"); 
    // Generates the image file name using the incremented "loadedImages" variable 
    var imageName = "graphics/img/Dodge_Viper_SRT10_2010_360_720_50-" + (loadedImages + 1) + ".jpg"; 
    var imageName1 = "graphics/img/Dodge_Viper_SRT10_2010_360_720_50-" + (loadedImages + 1) + ".jpg"; 
    /* 
       Creates a new <img> and sets its src attribute to point to the file name we generated. 
       It also hides the image by applying the "previous-image" CSS class to it. 
       The image then is added to the <li>. 
      */ 

    var image = $('<img>').attr('src', imageName).addClass("previous-image").appendTo(li) && $('<img>').attr('src', imageName1).addClass("previous-image light-image").appendTo(li); 

    // We add the newly added image object (returned by jQuery) to the "frames" array. 
    frames.push(image); 
    // We add the <li> to the <ol> 
    $images.append(li); 

    /* 
       Adds the "load" event handler to the new image. 
       When the event triggers it calls the "imageLoaded" function. 
      */ 
    $(image).load(function() { 
    imageLoaded(); 
    }); 
}; 

function imageLoaded() { 
    // Increments the value of the "loadedImages" variable 
    loadedImages++; 
    // Updates the preloader percentage text 
    $("#spinner span").text(Math.floor(loadedImages/totalFrames * 100) + "%"); 
    // Checks if the currently loaded image is the last one in the sequence... 
    if (loadedImages == totalFrames) { 
    // ...if so, it makes the first image in the sequence to be visible by removing the "previous-image" class and applying the "current-image" on it 
    frames[0].removeClass("previous-image").addClass("current-image"); 
    /* 
        Displays the image slider by using the jQuery "fadeOut" animation and its complete event handler. 
        When the preloader is completely faded, it stops the preloader rendering and calls the "showThreesixty" function to display the images. 
       */ 
    $("#spinner").fadeOut("slow", function() { 
     spinner.hide(); 
     showThreesixty(); 
    }); 
    } else { 
    // ...if not, Loads the next image in the sequence 
    loadImage(); 
    } 
}; 

これは、ブラウザでどのように見えるか、次のとおりです。

<ol><li><img src="graphics/img/Dodge_Viper_SRT10_2010_360_720_50-1.jpg" class="previous-image"><img src="graphics/img/Dodge_Viper_SRT10_2010_360_720_50-1.jpg" class="light-image current-image"></li></ol> 

これは私が欲しいもの、である：私は変更

<ol><li><img src="graphics/img/Dodge_Viper_SRT10_2010_360_720_50-1.jpg" class="current-image"><img src="graphics/img/Dodge_Viper_SRT10_2010_360_720_50-1.jpg" class="light-image current-image"></li></ol> 

この

var image = $('<img>').attr('src', imageName).addClass("previous-image").appendTo(li) && $('<img>').attr('src', imageName1).addClass("previous-image light-image").appendTo(li); 

to this

var image = $('<img>').attr('src', imageName1).addClass("previous-image light-image").appendTo(li) && $('<img>').attr('src', imageName).addClass("previous-image").appendTo(li); 

それでも2番目のimgのみが変更されます。どんな助け？

Answer 1

var image = $('<img>').attr('src', imageName).addClass("previous-image").appendTo(li) && $('<img>').attr('src', imageName1).addClass("previous-image light-image").appendTo(li); 

は、あなたがそれだと思う何をしていません。宣言する2番目の要素のみを使用しています。これらは両方ともページに追加されますが（appendToメソッドが実行されるため）、& &は論理演算子です。連結には使用されないため、変数 "image"には宣言した2番目の画像のみが含まれます。

これは、代わりに動作します：

var image = $('<img>', { "src": imageName, "class": "previous-image" }); 
image = image.add($('<img>', { "src": imageName1, "class": "previous-image light-image" })); 
image.appendTo(li); 

Answer 2

あなただけの、あなたがこれを行うことができ、現在の画像と以前のすべての画像クラスを交換しようとしている場合：

$('img.previous-image').each(function(){ 
    $(this).addClass("current-image").removeClass("previous-image"); 
});