我想问一个问题：我有这个代码,做了一个片段,让你的工作更轻松.
如果你点击你现在看不到的图像,另一个div会出现一些信息,在div内有另一个你也看不到的图像,点击它会显示更多信息.
并且有一个按钮显示所有/隐藏所有信息.
我想要实现的是,当任何弹出文本(通过点击图片显示)已经可见时,然后点击显示全部按钮,它保持原样,只有那些不可见的但是会出现.
你能帮我解决一下这个问题吗？
我希望你明白我的意思,如果没有,请问:)
谢谢你的帮助！
function popupD1() {
var popup = document.getElementById("myPopupD1");
popup.classList.toggle("show");
var image = document.getElementById("arrow1");
if (image.getAttribute('src') == "arrow.png") {
image.src = "arrowL.png";
} else {
image.src = "arrow.png";
}
var D1S=document.getElementById("D1S");
if(D1S.textContent=="Show info"){
D1S.textContent="Hide info";
} else {
D1S.textContent="Show info";
}
}
function D1moreinfo() {
var hide=document.getElementById("D1moreinfo");
if(hide.style.display ==="block") {
hide.style.display="none";
} else{
hide.style.display="block";
}
var image = document.getElementById("arrowL1");
if (image.getAttribute('src') == "arrowL.png") {
image.src = "arrow.png";
} else {
image.src = "arrowL.png";
}
}
function popupD2() {
var popup = document.getElementById("myPopupD2");
popup.classList.toggle("show");
var image = document.getElementById("arrow1");
if (image.getAttribute('src') == "arrow.png") {
image.src = "arrowL.png";
} else {
image.src = "arrow.png";
}
var D1S=document.getElementById("D2S");
if(D1S.textContent=="Show info") {
D1S.textContent="Hide info";
} else {
D1S.textContent="Show info";
}
}
function D2moreinfo() {
var hide=document.getElementById("D2moreinfo");
if(hide.style.display ==="block") {
hide.style.display="none";
} else{
hide.style.display="block";
}
var image = document.getElementById("arrowL1");
if (image.getAttribute('src') == "arrowL.png") {
image.src = "arrow.png";
} else {
image.src = "arrowL.png";
}
}
function showall(){
var D1 = document.getElementById("myPopupD1");
var D2 = document.getElementById("myPopupD2");
var D1M = document.getElementById("D1moreinfo");
var D2M = document.getElementById("D2moreinfo");
D1.classList.toggle("show");
D2.classList.toggle("show");
if(D1M.style.display ==="block") {
D1M.style.display="none";
} else{
D1M.style.display="block";
}
if(D2M.style.display ==="block") {
D2M.style.display="none";
} else{
D2M.style.display="block";
}
var D1S=document.getElementById("show");
if(D1S.textContent=="Show all"){
D1S.textContent="Hide all";
} else {
D1S.textContent="Show all";
}
}
.D1 {
border:1px solid;
border-color:red;
width:450px;
height:220px;
margin-top:10px;
}
#D1button {
border:none;
overflow:hidden;
background-color:transparent;
display:block;
position:absolute;
left:390px;
top:175px;
color:red;
}
.popupD1 {
position: relative;
display: inline-block;
cursor: pointer;
}
.popupD1 .popuptextD1 {
visibility: hidden;
width: 250px;
height:210px;
color: red;
text-align: center;
border-radius: 6px;
padding: 8px 0;
left:370px;
position: absolute;
z-index: 0;
top: 20px;
background-color: gray;
margin-left: 100px;
}
.popupD1 .popuptextD1:hover {
transition:1.5s;
background-image:url(BF4B9.jpg);
color:red;
}
.popupD1 .show {
visibility: visible;
-webkit-animation: fadeIn;
animation: fadeIn 1s;
}
#D1moreinfo {
background-color: transparent;
border-radius: 6px;
width:200px;
height:relative;
display:none;
position:absolute;
top:-5px;
left:255px;
}
.D2 {
border:1px solid;
border-color:red;
width:450px;
height:220px;
margin-top:10px;
}
#D2button {
border:none;
overflow:hidden;
background-color:transparent;
display:block;
position:absolute;
left:390px;
top:290px;
color:red;
}
.popupD2 {
position: relative;
display: inline-block;
cursor: pointer;
}
.popupD2 .popuptextD2 {
visibility: hidden;
width: 250px;
height:210px;
color: red;
text-align: center;
border-radius: 6px;
padding: 8px 0;
left:370px;
position: absolute;
z-index: 0;
top: 20px;
background-color: gray;
margin-left: 100px;
}
.popupD2 .popuptextD2:hover {
transition:1.5s;
background-image:url(BF4B9.jpg);
color:red;
}
.popupD2 .show {
visibility: visible;
-webkit-animation: fadeIn;
animation: fadeIn 1s;
}
#D2moreinfo {
background-color: transparent;
border-radius: 6px;
width:200px;
height:relative;
display:none;
position:absolute;
top:-5px;
left:255px;
}
.showall {
overflow:hidden;
background-color:transparent;
position:absolute;
top:-4px;
left:335px;
position:fixed;
border-radius:10px;
}
<div class="D1">
<div class="popupD1">
<span class="popuptextD1" id="myPopupD1">
*A long text that I'm not gonna paste here*<br>
<button id="morebutton1" onclick="D1moreinfo()"><img id="arrowL1" src="arrow.png"/></button>
<div id="D1moreinfo">
<ul>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
</ul>
</div>
</span>
</div>
<img id="D1K" src="XY.png"/>
<button id="D1button" onclick="popupD1()"><img id="arrow1" src="arrow.png"/><br><span id="D1S">Show info</span></button>
</div>
<div class="D2">
<div class="popupD2">
<span class="popuptextD2" id="myPopupD2">
*A long text that I'm not gonna paste here*<br>
<button id="morebutton1" onclick="D2moreinfo()"><img id="arrowL1" src="arrow.png"/></button>
<div id="D2moreinfo">
<ul>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
</ul>
</div>
</span>
</div>
<img id="D2K" src="XY.png"/>
<button id="D2button" onclick="popupD2()"><img id="arrow1" src="arrow.png"/><br><span id="D2S">Show info</span></button>
</div>
<div class="showall">
<button onclick="showall()" title="Hide/show all"><span id="show">Show all</span></button>
</div>
解决方法
问题是当你“showAll”你切换“show”类时,无论元素处于当前状态.所以你应该做的第一件事是检查所需的行为,如果有任何元素没有显示,你想要显示所有元素,如果显示所有元素,则要隐藏元素.见下文.
function popupD1() {
var popup = document.getElementById("myPopupD1");
popup.classList.toggle("show");
var image = document.getElementById("arrow1");
if (image.getAttribute('src') == "arrow.png") {
image.src = "arrowL.png";
} else {
image.src = "arrow.png";
}
var D1S = document.getElementById("D1S");
if (D1S.textContent == "Show info"){
D1S.textContent = "Hide info";
} else {
D1S.textContent="Show info";
}
}
function D1moreinfo() {
var hide = document.getElementById("D1moreinfo");
if (hide.style.display ==="block"){
hide.style.display = "none";
} else {
hide.style.display = "block";
}
var image = document.getElementById("arrowL1");
if (image.getAttribute('src') == "arrowL.png") {
image.src = "arrow.png";
} else {
image.src = "arrowL.png";
}
}
function popupD2() {
var popup = document.getElementById("myPopupD2");
popup.classList.toggle("show");
var image = document.getElementById("arrow1");
if (image.getAttribute('src') == "arrow.png") {
image.src = "arrowL.png";
} else {
image.src = "arrow.png";
}
var D1S=document.getElementById("D2S");
if (D1S.textContent == "Show info") {
D1S.textContent = "Hide info";
} else {
D1S.textContent = "Show info";
}
}
function D2moreinfo(){
var hide=document.getElementById("D2moreinfo");
if (hide.style.display ==="block"){
hide.style.display="none";
} else {
hide.style.display="block";
}
var image = document.getElementById("arrowL1");
if (image.getAttribute('src') == "arrowL.png") {
image.src = "arrow.png";
} else {
image.src = "arrowL.png";
}
}
function showall() {
var D1 = document.getElementById("myPopupD1");
var D2 = document.getElementById("myPopupD2");
var D1M = document.getElementById("D1moreinfo");
var D2M = document.getElementById("D2moreinfo");
// First we check if all elements are showing
var allShowing = (D1.classList.contains("show") &&
D2.classList.contains("show"));
// Then we allways hide the elements
D1.classList.remove("show");
D2.classList.remove("show");
// If any element was hidden,we show all of them
if (!allShowing) {
D1.classList.add("show");
D2.classList.add("show");
}
if (D1M.style.display === "block") {
D1M.style.display = "none";
} else {
D1M.style.display = "block";
}
if (D2M.style.display ==="block") {
D2M.style.display="none";
} else {
D2M.style.display="block";
}
}
.D1 {
border: 1px solid;
border-color: red;
width: 450px;
height: 220px;
margin-top: 10px;
}
#D1button {
border: none;
overflow: hidden;
background-color: transparent;
display: block;
position: absolute;
left: 390px;
top: 175px;
color: red;
}
.popupD1 {
position: relative;
display: inline-block;
cursor: pointer;
}
.popupD1 .popuptextD1 {
visibility: hidden;
width: 250px;
height: 210px;
color: red;
text-align: center;
border-radius: 6px;
padding: 8px 0;
left: 370px;
position: absolute;
z-index: 0;
top: 20px;
background-color: gray;
margin-left: 100px;
}
.popupD1 .popuptextD1:hover {
transition: 1.5s;
background-image: url(BF4B9.jpg);
color: red;
}
.popupD1 .show {
visibility: visible;
-webkit-animation: fadeIn;
animation: fadeIn 1s;
}
#D1moreinfo {
background-color: transparent;
border-radius: 6px;
width: 200px;
height: relative;
display: none;
position: absolute;
top: -5px;
left: 255px;
}
.D2 {
border: 1px solid;
border-color: red;
width: 450px;
height: 220px;
margin-top: 10px;
}
#D2button {
border: none;
overflow: hidden;
background-color: transparent;
display: block;
position: absolute;
left: 390px;
top: 290px;
color: red;
}
.popupD2 {
position: relative;
display: inline-block;
cursor: pointer;
}
.popupD2 .popuptextD2 {
visibility: hidden;
width: 250px;
height: 210px;
color: red;
text-align: center;
border-radius: 6px;
padding: 8px 0;
left: 370px;
position: absolute;
z-index: 0;
top: 20px;
background-color: gray;
margin-left: 100px;
}
.popupD2 .popuptextD2:hover {
transition: 1.5s;
background-image: url(BF4B9.jpg);
color: red;
}
.popupD2 .show {
visibility: visible;
-webkit-animation: fadeIn;
animation: fadeIn 1s;
}
#D2moreinfo {
background-color: transparent;
border-radius: 6px;
width: 200px;
height: relative;
display: none;
position: absolute;
top: -5px;
left: 255px;
}
.showall {
overflow: hidden;
background-color: transparent;
position: absolute;
top: -4px;
left: 335px;
position: fixed;
border-radius: 10px;
}
<div class="D1">
<div class="popupD1">
<span class="popuptextD1" id="myPopupD1">
*A long text that I'm not gonna paste here*
<br/>
<button id="morebutton1" onclick="D1moreinfo()">
<img id="arrowL1" src="arrow.png"/>
</button>
<div id="D1moreinfo">
<ul>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
</ul>
</div>
</span>
</div>
<img id="D1K" src="XY.png"/>
<button id="D1button" onclick="popupD1()">
<img id="arrow1" src="arrow.png"/>
<br/>
<span id="D1S">Show info</span>
</button>
</div>
<div class="D2">
<div class="popupD2">
<span class="popuptextD2" id="myPopupD2">
*A long text that I'm not gonna paste here*<br>
<button id="morebutton1" onclick="D2moreinfo()">
<img id="arrowL1" src="arrow.png"/>
</button>
<div id="D2moreinfo">
<ul>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
</ul>
</div>
</span>
</div>
<img id="D2K" src="XY.png"/>
<button id="D2button" onclick="popupD2()">
<img id="arrow1" src="arrow.png"/>
<br/>
<span id="D2S">Show info</span>
</button>
</div>
<div class="showall">
<button onclick="showall()" title="Hide/show all">
<span id="show">Show all</span>
</button>
</div>