Question

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

当用户点击相同的图像位置时，图像会根据xy值移动，并且div应该再次换出。我似乎无法使其正常运行。当我没有在divs上设置显示时，我可以让点击交换div，但是这两个div显示堆叠。我几乎在那里，但找不到我错过的只能一次显示一个div。有没有更好的方法可以做到这一点？请帮帮忙？

return client.Cypher
             .Match("(product:Product)-[viewed:VIEWED]-()")
             .Return((product,viewed) => new
             {
                 Product = product.As<Product>(),
                 Count = viewed.Count(),
                 Total = Return.As("sum(viewed.total)")
             })
             .OrderByDescending(???)
             .Limit(18)
             .Results.ToList();

这是我的javascript：

<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>

Answer 1

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

＆＃13;

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";
  }
}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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 show隐藏onclick与图像精灵

2 个答案: