Question

我在html中有3个图片，我在他们的js中通过他们的类来获取它们，将它们洗牌并且我需要让它们出现在通过改组排序的html上，但它们永远不会改变。这是我的HTML代码：

var frontcards = document.getElementsByClassName('cards');
var myCards = [];
myCards.push(frontcards[0]);
myCards.push(frontcards[1]);
myCards.push(frontcards[2]);
Array.prototype.shuffle = function() {
  var input = this;

  for (var i = input.length - 1; i >= 0; i--) {

    var randomIndex = Math.floor(Math.random() * (i + 1));
    var itemAtIndex = input[randomIndex];

    input[randomIndex] = input[i];
    input[i] = itemAtIndex;
  }
  return input;
}
var playButton = document.getElementById("play");
playButton.onclick = function() {
  myCards.shuffle();
  for (var i = 0; i < myCards.length; i++) {
    document.getElementsByClassName('cards')[i].innerHTML = myCards[i].src;
  }
}

<img class="cards" height="300px" width="200" src="images/card1.jpg">
<img class="cards" height="300px" width="200" src="images/card2.png">
<img class="cards" height="300px" width="200" src="images/card3.png">

我需要js来改变html上的图像src。那可能吗？

Answer 1

这是因为您设置了.innerHTML，当您应该设置.src来更改图片代码的图片时：

playButton.onclick= function (){
    myCards.shuffle();
    for(var i = 0; i < myCards.length; i++){
        // Change .innerHTML to .src below
        document.getElementsByClassName('cards')[i].src=myCards[i].src;
    }
}

Answer 2

您应该在设置源时设置innerHTML，为true，但是您有另一个可能不明显的问题。 myCards和document.getElementsByClassName('cards')的结果都包含对同一个3 img标记的引用（或指针），但顺序不同。当您修改其中一个阵列中的src时，它实际上会更改它们，因此您最终会得到重复的源。

可能有一些解决方案可能需要重构您的代码，但这是一个不会成功的解决方案。如果您将元素作为包含所有卡片的容器的子项附加（在下面的代码中我创建了一个卡片，但它依赖于您自己的html设置），那么它会将该特定卡片移动到容器的末端。对所有卡片执行此操作然后它们将按照随机顺序执行。它只是重新排序元素本身，因此您不必担心更改src（我从下面的示例中删除了以便更容易看到它被洗牌）

＆＃13;

var frontcards = document.getElementsByClassName('cards');
var myCards = [];
myCards.push(frontcards[0]);
myCards.push(frontcards[1]);
myCards.push(frontcards[2]);
Array.prototype.shuffle = function() {
  var input = this;

  for (var i = input.length - 1; i >= 0; i--) {

    var randomIndex = Math.floor(Math.random() * (i + 1));
    var itemAtIndex = input[randomIndex];

    input[randomIndex] = input[i];
    input[i] = itemAtIndex;
  }
  return input;
}
var playButton = document.getElementById("play");
playButton.onclick = function() {
  myCards.shuffle();
  var cards_area = document.getElementById("cards_area")
  for (var i = 0; i < myCards.length; i++) {
    cards_area.appendChild(myCards[i])
  }
}

＆＃13;

.cards{
  display : inline;
  transition : all 1s ease-in-out;
}

.c1{
  background-color : red;
}

.c2{
  background-color : blue;
}

.c3{
  background-color : green;
}

＆＃13;

<button id="play">PLAY</button>

<div id="cards_area">
  <img class="cards c1" height="300px" width="200">
  <img class="cards c2" height="300px" width="200">
  <img class="cards c3" height="300px" width="200">
</div>

＆＃13;

如何在js中对它们进行混洗后更改html中的图像？

2 个答案: