Question

这是我在这里的第一篇文章，我总是在这个页面上找到解决方案，所以非常感谢你。

我在上一个程序中遇到.removeClass和.addClass的问题。我将多张图片加载到数组Frames中，并希望在previous-image中将所有内容（current-image）更改为（frames[0]）。这是我的代码，它只是第二个图像上的更改类。这是代码：

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方法运行），但是＆amp;＆amp;是一个逻辑运算符，它不用于连接，所以变量＆＃34; image＆＃34;仅包含您声明的第二张图片。

这将改为：

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

更改数组中多个img的类

2 个答案: