如何从三张图片中选择一张?其余的必须是看不见的

How to choose one image out of three? The rest has to be invisible

本文关键字：看不见 一张 三张 选择      更新时间：2023-09-26

我正在制作一个游戏。你可以从三个bokser中选择一个作为你自己的bokser。然后你可以选择敌人，也可以从三个图像中选择一个。在你选择自己的博克和敌人之后。两个图像都必须可见，其余的不可见。

这是我的HTML

<div id="jouwbokser">
<h1>Kies Jouw Bokser!</h1>
<img id="bokser1" src="img/bokser1.png" alt="bokser" /><!--Bron:proksa.pl-->
<img id="boker2" src="img/bokser2.png" alt="bokser2" /><!--Bron:www.weekendowo.pl-->
<img id="bokser3" src="img/bokser3.png" alt="bokser3" /><!--Bron:www.ufc.com-->
</div>

<div id="computer">
<h1>Kies je Tegenstander</h1>
<img id="bokser4" src="img/bokser1.png" alt="bokser" /><!--Bron:proksa.pl-->
<img id="bokser5" src="img/bokser2.png" alt="bokser2" /><!--Bron:www.weekendowo.pl-->
<img id="bokser6" src="img/bokser3.png" alt="bokser3" /><!--Bron:www.ufc.com-->
</div>

有人知道怎么做吗？

https://jsfiddle.net/o7m1w2qk/

如何做到这一点有很多。这一切都取决于您的需求、环境、浏览器支持等等。

例如使用jQuery:

$("img").on("click", function() {
    var $this = $(this);
    var $div = $this.parent();
    $div.addClass("has-selected");
    $("img", $div).removeClass("selected");
    $this.addClass("selected");
});

CSS：

#jouwbokser.has-selected > img:not(.selected),
#computer.has-selected > img:not(.selected) {
    display: none;
}

https://jsfiddle.net/o7m1w2qk/1/

更新

非jQuery解决方案：

var onclickImg = function(event) {
    var img = event.target;
    var div = img.parentElement;
    for (var i = 0; i < div.children.length; i++) {
        var child = div.children[i];
        if (child.nodeName != "IMG") {
            continue;
        }
        child.className = "";        
    }
    div.className = "has-selected";
    img.className = "selected";
}
imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
    imgs[i].addEventListener('click', onclickImg);
}

https://jsfiddle.net/o7m1w2qk/3/

相关文章：