需要显示一个隐藏的文本，当我点击图像

Question

我在一个网站上工作，有多个图像。用户可以点击这张图片，然后它会在这张图片下面显示一个小文字。我的想法是获取图像的ID，然后显示与此图像对应的文本。

让我给你看看我的代码

function SOE() {
let bSOE = document.getElementById("bSOE");
let Soe = document.getElementById("SOE");
if (getComputedStyle(Soe).display != "none") {
Soe.style.display = "none";
} else {
var elements = document.getElementsByClassName("secret");
for (var i = 0; i < elements.length; i++) {
if (elements[i].id != "SOE") {
elements[i].style.display = "none";
}
}
Soe.style.display = "block";
}
}

<div class="mn_bo3">
<div class="map" id="bSOE" onclick="SOE()" style="background-image: url('source/Soe.png')"></div>
<div class="map" id="bTG" style="background-image: url('source/tg.png')"></div>
<div class="map" id="bDER" style="background-image: url('source/Der.png')"></div>
<div class="map" id="bZNS" style="background-image: url('source/Zns.png')"></div>
<div class="map" id="bGK" style="background-image: url('source/Gk.png')"></div>
</div>
<!--Tiny hidden text -->
<div class="secret" id="SOE" style="display:none;">
<p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>

所以我创建了一个函数，但它只适用于一个，它不使用这个ID。我需要一些帮助，否则这个代码将非常干燥。

非常感谢你的阅读!

Answer 1

检查这段代码，看看它是否解决了您的问题。

function SOE(selector) {
$('p').fadeOut(500)
$('#'+selector+' > p').fadeIn(500)
}

.mn_bo3 {
height: 100vh;
display: flex;
justify-content: space-between;
}
.map {
height: 100px;
width: 100px;
background-repeat: no-repeat;
background-size: contain;
position: relative;
}
p {
position: absolute;
bottom: -2em;
left: 0;
right: 0;
text-align: center;
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mn_bo3">
<div class="map" id="bSOE" onclick="SOE('bSOE')" style="background-image: url('1.png')">
<p>Text image 1</p>
</div>
<div class="map" id="bTG" onclick="SOE('bTG')" style="background-image: url('2.png')">
<p>Text image 2</p>
</div>
<div class="map" id="bDER" onclick="SOE('bDER')" style="background-image: url('3.png')">
<p>Text image 3</p> 
</div>
<div class="map" id="bZNS" onclick="SOE('bZNS')" style="background-image: url('4.png')">
<p>Text image 4</p>
</div>
<div class="map" id="bGK" onclick="SOE('bGK')" style="background-image: url('1.png')">
<p>Text image 5</p>
</div>
</div>

Answer 2

可以在onClick函数调用中传递每个div的id，如下所示:

JS:

function SOE(id){
let bSOE = document.getElementById(id);
... 
}

HTML:

<div  class="map" id="bSOE" onclick="SOE('bSOE')" style="background-image: url('source/Soe.png')" ></div>

或者如果它保证，每个对象都有一个ID，你可以通过'this'对象获得ID (js保持不变):

<div  class="map" id="bSOE" onclick="SOE(this.id)" style="background-image: url('source/Soe.png')" ></div>

之后，您可以创建一个对象，该对象使用文本id保存图像id:

var elements = { "BSOE": "SOE" }

然后为每个图像显示相应的文本:

function SOE (id) {
var elem = document.getElementById(elements[id]);
elem.style.display = "block";

Answer 3

您可以为所有图像创建一个通用的click处理程序，并与接收图像一起显示隐藏文本。

在本例中，代码结构如下

<div class="map" id="bSOE" onclick="onElementClick(this)" style="background-image: url(https://picsum.photos/200)"></div>
<div class="secret" id="bSOE_text">
<p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>

function onElementClick(event){
//Before showing div hide other's one 
[...document.querySelectorAll('div.secret')].forEach(el => el.style.display = 'none');
//To show the repective div
document.querySelector('div#' + event.id + '_text').style.display = 'block';
}

.map {
height: 100px;
width: 100px;
background-size: cover;
order: 1px solid;
margin: 10px;
}
.secret {
display: none;
}

<div class="mn_bo3">
<div  class="map" id="bSOE" onclick="onElementClick(this)" style="background-image: url(https://picsum.photos/200)" ></div>
<div class="secret" id="bSOE_text">
<p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>
<div class="map" id="bTG" style="background-image: url(https://picsum.photos/200
)"  onclick="onElementClick(this)"></div>
<div class="secret" id="bTG_text">
<p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>
<div class="map" id="bDER" style="background-image: url(https://picsum.photos/200)" onclick="onElementClick(this)"></div>
<div class="secret" id="bDER_text">
<p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>
<div class="map" id="bZNS" style="background-image: url(https://picsum.photos/200)" onclick="onElementClick(this)"></div>
<div class="secret" id="bZNS_text">
<p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>
<div class="map" id="bGK" style="background-image: url(https://picsum.photos/200)" onclick="onElementClick(this)"></div>
<div class="secret" id="bGK_text">
<p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>    
</div>

Answer 4

当你坚持使用Javascript功能为其他目的对用户点击你的照片,我建议你检查一下其他答案,随你挑吧。

当您正在寻找一个直接的解决方案时，您可能想要研究使用<details><summary>结构，因为这些元素默认包含单击-显示机制，而不需要Javascript。

看看这个简单的代码片段:

/* [OPTIONAL], but makes sense in this case */
summary { list-style-type: none }
/* just extra eye-candy */
body    { padding: 1rem; margin: 0; cursor: default }
summary { cursor: pointer }

<details>
<summary><img src="https://picsum.photos/360?random=1"></summary>
<p>some tiny text when the image gets clicked</p>
</details>