时间戳

首页 > 解决方案 > 在 JavaScript 中单击时如何旋转单个图像的顺序？

javascript - 在 JavaScript 中单击时如何旋转单个图像的顺序？

问题描述

我需要按顺序显示 3 张动物图片“猫”、“狗”和“青蛙”。每当用户点击“猫”图片时，就会出现一个警告窗口，上面写着“不要点击我，点击青蛙”。每当用户点击“狗”图片时，就会出现一个警告窗口，上面写着“不要点击我，点击青蛙”。每当用户点击“青蛙”图片时，青蛙就会跳过猫和狗。这意味着一开始它显示Cat Dog Frog，当用户点击青蛙时，它变成Frog Cat Dog，用户再次点击青蛙，它变成Cat Dog Frog，等等。

编辑：图片需要水平，但我目前将它们垂直。我似乎无法弄清楚如何使它们水平。到目前为止，这是我的代码：

function swapDiv(event,elem){
    elem.parentNode.insertBefore(elem,elem.parentNode.firstChild);
}
<div id="container">
    <td><div onclick="swapDiv(event,this);"><img src="cat.png" 
    style="width:200;height:200;"/></div></td>
    <td><div onclick="swapDiv(event,this);"><img src="dog.png" 
    style="width:175;height:175;"/></div></td>
    <td><div onclick="swapDiv(event,this);"><img src="frog.png" 
    style="width:150;height:150;"/></div></td>
</div>

标签： javascriptimageparent-child

解决方案

一种不同的方法，但受到尼克的回答的启发：

function clickFrog() { // Create a function to execute when a non-frog image is clicked
  alert("Don't click me, click the frog"); // create the alert window
}

function swapDiv(e, o) {
  o.classList.toggle("jumped");
}
#container {
  display: flex;
}

.jumped {
  order: -1;
}
<div id="container">
  <td>
    <div onclick="clickFrog();"><img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="width:200px;height:200px;" /></div>
  </td>
  <td>
    <div onclick="clickFrog();"><img src="https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="width:175px;height:175px;" /></div>
  </td>
  <td>
    <div onclick="swapDiv(event,this);"><img src="https://images.unsplash.com/photo-1506506447188-78e2a1051d9e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="width:150px;height:150px;" /></div>
  </td>
</div>

推荐阅读