Javascript div 显示隐藏带有图像精灵的点击

Question

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

当用户点击相同的图像位置时，图像会根据 xy 值移动，divs 应该会再次换出。我似乎无法让它正常运行。当我没有在任何一个 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>

Javascript div 显示隐藏带有图像精灵的点击

Javascript div show hide onclick with image sprite

html

javascript

css

onclick

sprite