如何在JavaScript中随机点击一对图片？

Question

如何在JavaScript中随机点击一对图片？

3

/* egg & broke egg  pair1  lite & broke lite pair2 pot & frys pair3 */

我想知道如何将图像配对或组队。因此，当您单击蛋图像时，它会消失并出现破碎的蛋。然后该图像也应该消失，然后其中两个团队之一会随机地出现，即轻触轻敲轻松地随机出现和消失，并轻触锅后，它变成了炸薯条，然后炸薯条消失并变成随机团队。

  </head>

  <body onLoad="setRandomImage()"> 

  <img id="egg.png" src= "http//"onClick="setRandomImage();"/>
  <img id="brokeEgg.png" src= "https://" style="display:none"/>

<img id="lite.png" src= "http://" style="display:none"/>
<img id="brokeLite.png" src= "http://" style="display:none"/>

<img id="pot.jpg" src= "https://style="display:none"/>
<img id="frys.jpg" src= "http://style="display:none"/>


<script type="text/javascript">  



    var myShapes=     ["egg.png","brokeEgg.png","lite.png","brokeLite.png","pot.jpg","frys.jpg"    ];



    function setRandomImage() {

    var imgElem = document.getElementById("egg.png")

    imgElem.setAttribute('src',myShapes[Math.floor(Math.random()*6)]);


    };

    </script>

- altitudeup

谢谢您的时间，我只是想说我只是一个幼儿园学生，所以如果我看起来很慢，请原谅我，但我不确定如何做到这一点，但我会尝试！ - altitudeup

学前班？你在编程？哇。我侄女还在上学前班，连鞋带都没学会... - evolutionxbox

哈哈...嗯...你知道的，我学得很快:) 是啊，但我希望我已经掌握了更多！就目前我对JS的了解而言，我的技能与这里大多数人相比就像是一个学前班的孩子。看起来他们都拥有硕士或至少是大学毕业生！ - altitudeup

哈哈，我认为这里大多数人仍在学习。记住，犯错误是一件好事。只要保持开放心态，展示你的工作，并尽量不要在人们发表苛刻评论时感到冒犯（他们会这样做）。 - evolutionxbox

1

是的，Harsh说得很好。我仍在学习如何使用这个网站，我一直被其他用户编辑问题并将其挂起，这里很难...哈哈，但感谢您提供的信息和帮助，非常感激。我们需要更多像您这样的人...祝福！ - altitudeup

3个回答

1

这是一个非常简化的方法，利用HTML data-* 属性，但需要注意以下几点：

data-image-seq 属性的值必须为 img 后面跟着一个数字。
这些数字必须按顺序排列。

更新：

jsFiddle

var imgs = document.querySelectorAll('.imgs-wrapper img'),
  currentIMG = 1;

// attach click events on odd images only, egg, lite, pot, hi1, hello1
for (var i = 0; i < imgs.length; i += 2) {
  addEvent(imgs[i], 'click');
}

function addEvent(element, event) {
  element.addEventListener(event, function() {
    var imgSeq = element.getAttribute('data-image-seq'),
      nextImgSeq, nextImg, shownIMG;

    imgSeq = parseInt(imgSeq.replace('img', ''), 10);
    nextImgSeq = (imgSeq < imgs.length) ? (imgSeq + 1) : 1;
    nextImg = 'img[data-image-seq=img' + nextImgSeq + ']';
    element.style.display = 'none';
    shownIMG = document.querySelector(nextImg);
    shownIMG.style.display = 'block';
    setTimeout(function() {
      shownIMG.style.display = 'none';
      showRandomImg();
    }, 1000);
  });
}

function showRandomImg() {
  var randomIMG = returnRandomOddNum();
  randomIMG = (randomIMG !== currentIMG) ? randomIMG : returnRandomOddNum();
  currentIMG = randomIMG;
  randomIMG = 'img[data-image-seq=img' + randomIMG + ']';
  document.querySelector(randomIMG).style.display = 'block';
}

function returnRandomOddNum() {
  var randomNum = Math.floor(Math.random() * imgs.length);
  randomNum = (randomNum % 2 != 0) ?  randomNum : randomNum + 1;
  return randomNum;
}

.imgs-wrapper { position: relative; }
.imgs-wrapper { cursor: pointer; }
.hide-me { display: none; }

<div class="imgs-wrapper">
  <img data-image-seq="img1" src="//dummyimage.com/150x50?text=egg">
  <img data-image-seq="img2" src="//dummyimage.com/150x50?text=broke egg" class="hide-me">
  <img data-image-seq="img3" src="//dummyimage.com/150x50?text=lite" class="hide-me">
  <img data-image-seq="img4" src="//dummyimage.com/150x50?text=broke light" class="hide-me">
  <img data-image-seq="img5" src="//dummyimage.com/150x50?text=pot" class="hide-me">
  <img data-image-seq="img6" src="//dummyimage.com/150x50?text=frys" class="hide-me">
  <img data-image-seq="img7" src="//dummyimage.com/150x50?text=Hi1" class="hide-me">
  <img data-image-seq="img8" src="//dummyimage.com/150x50?text=Hi2" class="hide-me">
  <img data-image-seq="img9" src="//dummyimage.com/150x50?text=Hello1" class="hide-me">
  <img data-image-seq="img10" src="//dummyimage.com/150x50?text=Hello2" class="hide-me">
</div>

- Mi-Creativity

好的，当我们展示它们后，破蛋、破灯或油炸食品会如何消失？ - Mi-Creativity

抱歉，我不确定你的意思，但我猜测你是在说setTimeout函数，但请不要引用我的话。 - altitudeup

如果您不介意我问一下，您学习JavaScript花了多长时间才变得非常优秀？ - altitudeup

我并不擅长JavaScript，有成千上万的人比我更优秀，但是通过练习和面对挑战，我们或其他人遇到的问题，就像在S.O上一样，同时具备良好的编程背景，能够在大多数编程语言中做出很好的利用。这种从小事做起的编程方法不仅适用于JavaScript，也适用于其他大多数编程语言。 - Mi-Creativity

欢迎，我很高兴能帮到你。如果我的回答对你有帮助的话，你可以考虑将其标记为正确答案和/或点赞，这取决于你，伙计 :) - Mi-Creativity

显示剩余11条评论

0

如果我正确理解了问题，您可以使用一个对象而不是一个数组来表示“myShapes”。

var myShapes = {
 "egg.png": "brokeEgg.png",
...
}

因此，当您单击图像时，可以找到配对的图像。

- Carlo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick Bull · Accepted Answer

使用此函数在单击时切换两个元素的可见性：

      function bindToggleVisibilityOnClick(firstElemId, secondElemId) {
          var firstElement = document.getElementById(firstElemId);
          var secondElement = document.getElementById(secondElemId);
          
          firstElement.onclick = function() { toggleVisibility(firstElement, secondElement); };
          secondElement.onclick = function() {  toggleVisibility(secondElement, firstElement); };
        }

    function toggleVisibility(checkElem, otherElem){
            // If target is invisible
            if (checkElem.style.display == "none" 
                //|| checkElem.style.visibility == "hidden"
            ) {
              checkElem.style.display = "block";
              // checkElem.style.visibility = "visible";
              otherElem.style.display = "none"
              // otherElem.style.visibility = "hidden";          
            }
            else {
              otherElem.style.display = "block";
              checkElem.style.display = "none"
              // checkElem.style.visibility = "hidden";                
            }
          };

    bindToggleVisibilityOnClick("egg", "brokenEgg");

#egg       { display: block; }
#brokenEgg { display: none; }

<div id="egg"><p>hi</p></div>
<div id="brokenEgg"><p>hi2</p></div>

Use as such:

// Should now toggle visibility on click
bindToggleVisibilityOnClick("egg", "brokenEgg");

请注意，我已经留下了切换 visibility 而不是 display 的行，这将隐藏元素但保留其占用的空间。编辑：如果您想要更改一次而不是还原，请在函数中注释掉第二个绑定，如下所示：

      function bindToggleVisibilityOnClick(firstElemId, secondElemId) {
          var firstElement = document.getElementById(firstElemId);
          var secondElement = document.getElementById(secondElemId);
          
          firstElement.onclick = function() { toggleVisibility(firstElement, secondElement); };
          //secondElement.onclick = function() {  toggleVisibility(secondElement, firstElement); };
        }

    function toggleVisibility(checkElem, otherElem){
            // If target is invisible
            if (checkElem.style.display == "none" 
                //|| checkElem.style.visibility == "hidden"
            ) {
              checkElem.style.display = "block";
              // checkElem.style.visibility = "visible";
              otherElem.style.display = "none"
              // otherElem.style.visibility = "hidden";          
            }
            else {
              otherElem.style.display = "block";
              checkElem.style.display = "none"
              // checkElem.style.visibility = "hidden";                
            }
          };

    bindToggleVisibilityOnClick("egg", "brokenEgg");

#egg       { display: block; }
#brokenEgg { display: none; }

<div id="egg"><p>hi</p></div>
<div id="brokenEgg"><p>hi2</p></div>