在数组中的多个图像上更改 class

Question

这是我第一次post来到这里，我总是在这个页面上找到解决方案，所以谢谢你。

我上一个程序中的 .removeClass 和 .addClass 有问题。我将多张图片加载到数组 Frames 中，我想将 frames[0] 中的所有 (previous-image) 更改为 (current-image)。这是我的代码，仅在第二张图片上更改 class。这是代码：

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

至此

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

它仍然只改变第二个img。有帮助吗？

Answer 1

如果您只是想用当前图像替换所有以前的图像类那么您可以这样做：

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

Answer 2

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

并没有按照您的想法行事。它仅使用您声明的第二个元素。它们都附加到页面（因为 appendTo 方法运行），但 && 是逻辑运算符，它不用于连接，因此变量 "image" 仅包含您声明的第二个图像。

这会起作用：

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

在数组中的多个图像上更改 class

Change class on multiple img in array

javascript

arrays

jquery

addclass

removeclass