如何在javascript中随机单击成对的图像？_Javascript

如何在javascript中随机单击成对的图像？

javascript

如何在javascript中随机单击成对的图像？,javascript,Javascript,我想知道如何使图像配对或组合。因此，当您单击鸡蛋图像时，它将消失，并显示破碎的鸡蛋。然后这个图像也应该消失，然后其他两个团队中的一个随机出现lite单击lite Break lite随机出现和消失，然后单击pot它变成frys然后frys消失并变成一个随机团队 /* egg & broke egg pair1 lite & broke lite pair2 pot & frys pair3 */ var myShapes=[“egg.png”、“brokeEgg.

我想知道如何使图像配对或组合。因此，当您单击鸡蛋图像时，它将消失，并显示破碎的鸡蛋。然后这个图像也应该消失，然后其他两个团队中的一个随机出现lite单击lite Break lite随机出现和消失，然后单击pot它变成frys然后frys消失并变成一个随机团队

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


var myShapes=[“egg.png”、“brokeEgg.png”、“lite.png”、“brokeLite.png”、“pot.jpg”、“frys.jpg”]；
函数setRandomImage（）{
var imgElem=document.getElementById（“egg.png”）
setAttribute（'src'，myShapes[Math.floor（Math.random（）*6）]；
};

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

函数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）；}；
}
功能切换可见性（checkElem、otherElem）{
//如果目标不可见
如果（checkelm.style.display==“无”
//||checkelm.style.visibility==“隐藏”
) {
选中elem.style.display=“block”；
//选中lem.style.visibility=“可见”；
otherElem.style.display=“无”
//otherElem.style.visibility=“隐藏”；
}
否则{
otherElem.style.display=“块”；
选中lem.style.display=“无”
//选中lem.style.visibility=“hidden”；
}
};
bindToggleVisibilityOnClick（“鸡蛋”、“断奶”）
#egg{display:block；}
#brokenEgg{display:none；}
你好
hi2
如果我正确理解了这个问题，你可以使用对象而不是数组
  </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>

因此，当您单击一个图像时，您可以找到配对的图像。
这里有一个非常简化的图像，使用HTML属性，但要考虑：

值data image seq
属性必须是img
，后跟一个数字
这些数字必须按顺序排列

已更新


var-imgs=document.querySelectorAll（'.imgs-wrapper-img'），
电流img=1；
//仅在奇数图像上附加单击事件、鸡蛋、lite、锅、hi1、hello1
对于（变量i=0；i

.imgs包装{位置：相对；}
.imgs包装器{游标：指针；}
.hide me{display:none；}

感谢您抽出时间，我只想说，我是一名学前班的学生，如果我看起来很慢，请原谅，但我不确定如何做到这一点，但我会试一试！就学前的？你在编码？哇！我侄女在幼儿园，她甚至还没学会系鞋带……哈哈……嗯。。。你知道，我理解得很快：）是的，我希望！！！这将是巨大的，我的意思是，我现在对js的了解，我的技能相当于一个学龄前儿童，与这里的大多数人相比，他们似乎获得了硕士学位或至少是大学毕业生！哈哈，我想这里的大多数人还在学习。记住，犯错误是件好事。只要开诚布公，展示你的作品，当人们发表严厉的评论（他们会）时，尽量不要生气。是的，严厉的措辞很好。我还在学习如何使用这个网站。我一直在被其他用户编辑。问题暂时搁置。这里很难回答。。哈哈，谢谢你的信息和帮助，非常感谢我们需要更多像你这样的人…祝福！正如我在这里告诉另一位用户的那样，说到js，我充其量只是个学龄前儿童，所以非常感谢您的帮助！我会尝试一下，然后和你一起回来，再次感谢你@altitudeup请立即尝试代码，而不是在编辑之前！我的.onclick
函数绑定出现语法错误。试着运行代码段，看看它应该如何工作。请记住，您的元素必须为函数设置显示
属性，以更改元素的样式。显示
（例如，如果您尝试在CSS中未设置显示
的元素上使用此属性（例如，p{margin:20px；}
）p
需要显示属性才能执行上述功能）。Hey@NickBull它的工作方式是在单击时从hi转到hi2再回到hi。是否希望它只发生一次，即从一个图像到下一个图像，然后不还原？我想你可能希望它在进一步点击后返回。我将update@altitudeup更新。谢谢你！但我不能有一个点击功能
var myShapes = {
 "egg.png": "brokeEgg.png",
...
}