Klasse auf mehreren img in Array ändern

Question

Dies ist mein erster Beitrag hier, ich habe immer Lösungen auf dieser Seite gefunden, also vielen Dank dafür.

Ich habe ein Problem mit .removeClass und .addClass in meinem letzten Programm. Ich lade mehrere Bilder in Array Frames und ich möchte alle (previous-image) zu (current-image) in frames[0] ändern. Hier ist mein Code, es ist Change-Klasse nur auf dem zweiten Bild. Hier ist der Code:

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(); 
    } 
}; 

Dies ist, wie es in Browser aussieht:

<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> 

Das ist, was ich will:

<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> 

Als ich das

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

ändern

zu diesem

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

es ändert sich immer noch nur zweite img. Irgendeine Hilfe?

Answer 1

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

nicht tun, was Sie denken, es ist. Es verwendet nur das zweite deklarierte Element. Sie werden beide an die Seite angehängt (weil die AppendTo-Methode ausgeführt wird), aber & & ist ein logischer Operator, sie wird nicht zur Verkettung verwendet, daher enthält die Variable "image" nur das zweite von Ihnen deklarierte Bild.

wird diese stattdessen arbeiten:

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

Answer 2

Wenn Sie nur versuchen, alle Klassen vorherige Bildes mit aktuellem Bild zu ersetzen, dann können Sie dies tun:

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