I like to plus one more data-destination which name is ads data-destination
When you click ads button which is white font-color and black background in the center, ads ads ads is shown in the area of alarm alarm alarm or menu
menu menu.
And click the ads button again which is white font-color and black background in the center, ads will be hidden.
The following is one of my trials for it. http://dot.kr/qna/230109trial/
However, ads ads ads is shown from the first at the trial above.
It should not be shown when it loading.
The buttons need a class of button because that’s what the js is looking for.
Add a class of button to the new buttons and then try again. You will need to add an extra modifying class also to style it differently and change the width etc.
However, it still has problems.
The 1st problem is that there is a line break between “ads” and “button” like the below although it is not very long phrase.
It should be in a line like the below without the line break.
You are using two buttons to do the same thing which is a bit weird but you can probably make it work by adding the active class to the second button by default.
I’m not really following your logic (as usual) but I think you will need to make a special case for these new actions as they don’t follow the original criteria.
(function (d) {
("use strict");
const content = d.querySelectorAll(".modal");
const buttons = d.querySelectorAll(".button");
const footer = d.querySelector(".button-footer");
const hideAllControls = d.querySelectorAll("[data-hide-all]");
buttons.forEach((item) => {
item.addEventListener("click", (event) => {
if (item.classList.contains("button-ads1")) {
hideAll();
d.querySelector("#" + item.dataset.destination).classList.remove(
"hide"
);
return;
}
if (item.classList.contains("button-ads2")) {
hideAll();
d.querySelector("#" + item.dataset.destination).classList.add("hide");
return;
}
if (item.classList.contains("active")) {
// this is the current one so hide this one and hide its destination
item.classList.remove("active");
d.querySelector("#" + item.dataset.destination).classList.add("hide");
item.blur(); // remove focus
// no need to do anything else
} else {
// we don't know which button is clicked so we hide all and only show this and its destination.
hideAll();
item.classList.add("active");
d.querySelector("#" + item.dataset.destination).classList.remove(
"hide"
);
}
});
});
function hideAll() {
content.forEach((item) => {
item.classList.add("hide");
item.classList.remove("show");
});
buttons.forEach((item) => {
item.classList.remove("active");
});
}
// hide everything when footer button is clicked.
footer.addEventListener("click", (event) => {
hideAllControls.forEach((item) => {
item.classList.add("hide");
});
});
})(document);
There’s probably an easier way but I got lost in the new logic.
The second button doesn’t go anywhere so doesn’t need the data attribute. The button just hides the current item. Indeed if I;m not mistaken you don’t need the middle line of the js here.
if (item.classList.contains("button-ads2")) {
hideAll();
d.querySelector("#" + item.dataset.destination).classList.add("hide");
return;
}
It could just be this I think (untested).
if (item.classList.contains("button-ads2")) {
hideAll();
return;
}
Can I use the 2nd link which is shorter than 1st link?
Why does the 2nd link work fine although it has no contains(“button-ads1”) and contains(“button-ads2”)?
