Javascript div show hide onclick with image sprite

Question

我正在尝试使用 javascript 编写带有图像的 div 交换。我创建了两个 div。一个是显示块，第二个 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>

Answer 2

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

<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" style="display:block;">
<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"style="display:none;">
<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>
    <button onclick="lhtrial()">button</button><!-- option 2-->
</div>

在这里测试Solution

我在 html 中添加了这个<div id="trialarea" style="display:block;">

js的变化不大

    function lhtrial(){
ele = document.getElementById("trialarea").style.display;
    if(ele == "block") {
   document.getElementById("trialarea").style.display = 'none';
   document.getElementById("trialarea2").style.display = 'block';
        text.innerHTML = "show";

}
else {
    document.getElementById("trialarea").style.display = 'block';
    document.getElementById("trialarea2").style.display = 'none';

    text.innerHTML = "hide";
}
}

我添加了按钮，但你可以设置其他点击事件

 <button onclick="lhtrial()">button</button>