I'm working on a website which have multiply images. The user can click on this images and then it will show a tiny text under this one. My idea was to get the ID of the images and then show the text who correspond to this one.
Let me show you my code
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 >
<div id="bSOE" onclick="SOE()" style="background-image: url('source/Soe.png')"></div>
<div id="bTG" style="background-image: url('source/tg.png')"></div>
<div id="bDER" style="background-image: url('source/Der.png')"></div>
<div id="bZNS" style="background-image: url('source/Zns.png')"></div>
<div id="bGK" style="background-image: url('source/Gk.png')"></div>
</div>
<!--Tiny hidden text -->
<div id="SOE" style="display:none;">
<p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>So I created a function but it's working only for one and it's not using this ID. I need some help or this code will be very DRY.
Thanks a lot for read that!
CodePudding user response：
Check up on this code to see if it solve your issue.
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 >
<div id="bSOE" onclick="SOE('bSOE')" style="background-image: url('1.png')">
<p>Text image 1</p>
</div>
<div id="bTG" onclick="SOE('bTG')" style="background-image: url('2.png')">
<p>Text image 2</p>
</div>
<div id="bDER" onclick="SOE('bDER')" style="background-image: url('3.png')">
<p>Text image 3</p>
</div>
<div id="bZNS" onclick="SOE('bZNS')" style="background-image: url('4.png')">
<p>Text image 4</p>
</div>
<div id="bGK" onclick="SOE('bGK')" style="background-image: url('1.png')">
<p>Text image 5</p>
</div>
</div>CodePudding user response：
You could pass the id of each div in the onClick function call, like this:
JS:
function SOE(id){
let bSOE = document.getElementById(id);
...
}
HTML:
<div id="bSOE" onclick="SOE('bSOE')" style="background-image: url('source/Soe.png')" ></div>
Or if its guaranteed, that every object has an ID you could get the id via the 'this' object (js stays the same):
<div id="bSOE" onclick="SOE(this.id)" style="background-image: url('source/Soe.png')" ></div>
After that you can create a object, which saves the image id with the text id:
var elements = { "BSOE": "SOE" }
And then display the corresponding text for each image:
function SOE (id) {
var elem = document.getElementById(elements[id]);
elem.style.display = "block";
CodePudding user response：
You can create a common click handler for all images and show hidden text with receptive image.
So in this case your code structure will be as below
<div id="bSOE" onclick="onElementClick(this)" style="background-image: url(https://picsum.photos/200)"></div>
<div id="bSOE_text">
<p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>
Working Code
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 >
<div id="bSOE" onclick="onElementClick(this)" style="background-image: url(https://picsum.photos/200)" ></div>
<div id="bSOE_text">
<p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>
<div id="bTG" style="background-image: url(https://picsum.photos/200
)" onclick="onElementClick(this)"></div>
<div id="bTG_text">
<p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>
<div id="bDER" style="background-image: url(https://picsum.photos/200)" onclick="onElementClick(this)"></div>
<div id="bDER_text">
<p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>
<div id="bZNS" style="background-image: url(https://picsum.photos/200)" onclick="onElementClick(this)"></div>
<div id="bZNS_text">
<p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>
<div id="bGK" style="background-image: url(https://picsum.photos/200)" onclick="onElementClick(this)"></div>
<div id="bGK_text">
<p>Here are the list of the easter eggs of Shadow of Evil map :</p>
</div>
</div>CodePudding user response：
When you insist on using Javascript functionality for other purposes regarding users clicking on your images, I suggest you check the other answers and take your pick.
When you are looking for a straightforward solution, you might want to investigate using a <details><summary> construction as these elements by default incorporate a click-an-show mechanism without the need for Javascript.
Have a look at this simple snippet:
/* [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>