Javascript div show hide onclick with image sprite

Question

我正在尝试使用 javascript 编写带有图像的 div 交换。我创建了两个 div。一个是显示 block ，第二个是不显示的 div。当用户单击图像时，onclick 应该隐藏显示的 div 并在其位置显示隐藏的 div。

当用户单击同一图像位置时，图像会根据 xy 值移动，并且 div 应该会再次换出。我似乎无法让它正常运行。当我没有在任何一个 div 上设置显示时，我可以单击以换出 div，但这会使两个 div 显示堆叠。我快到了，但找不到一次只显示一个 div 所缺少的东西。有没有更好的方法可以做到这一点？请帮忙？

<div class="row" style="margin-top: 15px;">
<div style="border:1px dashed #CCC;background:#fff;padding:10px 0px;">
<div style="text-align:center;">
<div id="lifehacks" onclick="lhtrial();">
<div id="trialarea">
<p style="background: url('images/LH_Trial.png') 0 0;background-repeat: no-repeat; height: 75px;">&nbsp;</p>
<p><span id="lhtext"><span style="color:#999; font-size:12px;padding:20px 30px 0 30px;">(Click Above To Opt-In To LifeHacks)</span></span></p>
</div>
<div id="trialarea2">
<p style="background: url('images/LH_Trial.png') 0 -75px;background-repeat: no-repeat; height: 75px;">&nbsp;</p>
<p><span id="lhtext"><span style="color:#999; font-size:12px;padding:20px 30px 0 30px;">(Click Above If You Want To Opt-Out Of LifeHacks)</span></span></p>
</div>
</div>
</div>
</div>
</div>

这是我的javascript:

<script>

ele = document.getElementById("trialarea");
function lhtrial(){
if(ele.style.display == "block") {
    ele.style.display = "none";
    text.innerHTML = "show";
}
else {
    ele.style.display = "block";
    text.innerHTML = "hide";
}
}
</script>

Answer 1

以下代码应该适合您，尽管您最好使用 addEventListener() 附加您的事件而不是在 HTML 中内联。您还在 HTML 中两次标识了 id lhtext，这是不允许的。

function lhtrial() { 
  ele = document.getElementById("trialarea");
  ele2 = document.getElementById("trialarea2");
  
  if (ele.style.display === "none") {
    ele.style.display = "block";
    ele2.style.display = "none";
  } else {
    ele.style.display = "none";
    ele2.style.display = "block";
  }
}

#lhimage1 {
  background: url('http://lorempixel.com/400/200/sports/1/') 0 0;
  background-repeat: no-repeat; 
  height: 75px;
}
#lhimage2 {
  background: url('http://lorempixel.com/400/200/sports/2/') 0 0;
  background-repeat: no-repeat; 
  height: 75px;
}
#trialarea2 {
  display: none;
}

<div id="lifehacks" onclick="lhtrial();">
  <div id="trialarea">
    <p id="lhimage1">&nbsp;</p>
    <p><span id="lhtext1"><span style="color:#999; font-size:12px;padding:20px 30px 0 30px;">(Click Above To Opt-In To LifeHacks)</span></span></p>
  </div>
  <div id="trialarea2">
    <p id="lhimage2">&nbsp;</p>
    <p><span id="lhtext2"><span style="color:#999; font-size:12px;padding:20px 30px 0 30px;">(Click Above If You Want To Opt-Out Of LifeHacks)</span></span></p>
  </div>
</div>