Question

我试图在我的网页中隐藏div，直到单击图像为止。目前我可以单击该按钮并尝试使用javascript来执行此操作。

不幸的是，我尝试将其附加到的div没有响应。

我在下面附上了一张图片，上面的图片是我试图点击访问标有＆＃34;笔记本电脑和Macbook＆＃34;的网页的底部部分。我希望隐藏该部分直到单击图像。

我已经附上了我一直在尝试的代码，以及整个网页的jsfiddle：https://jsfiddle.net/2j4b4bdn/4/

任何提示或建议都将不胜感激！

  <button id="toggleBtn">
        <img src="multiple.png" class="img-responsive"

             width="200px" class="img-responsive" style="margin: 0 auto;">
            </button>

<script> 

var elementToClick = document.querySelector(".togglebtn");
var elementToShow = document.querySelector(".box1");

if(elementToClick){
    elementToClick.addEventListener("click", showElement)
}

function showElement(){
    elementToShow.classList.add("show");
}
    </script>


      <div class="box1" id="box1"> 



<div> <img src="laptop.png" class="laptop"> </div>


<div class="bottomtext">Please enter a figure for the number of individual laptops/macbooks that you would like to insure in each price range.  Where you dont want cover with a particular price range, please leave bank.</div>




<div class="container">
    <div class="row" style="">

        <div class="col-xs-2" id="p1">0</div>

           <p class=Text1>Up to £500 <br>How many would you like to insure?</p>

        <div class="col-xs-2 col-half-offset" id="p2">0</div>
         <div style="position:absolute; left:10rem;">
          <p class=Text2>Up to £500 <br>How many would you like to insure?</p></div>
        <div class="col-xs-2 col-half-offset" id="p3">0</div>
         <div style="position:absolute; left:10rem;">
             <p class=Text3>Up to £500 <br>How many would you like to insure?</p> </div>
        <div class="col-xs-2 col-half-offset" id="p4">0</div>
         <div style="position:absolute; left:10rem;">
             <p class=Text4>Up to £500 <br>How many would you like to insure?</p></div>
        <div class="col-xs-2 col-half-offset" id="p5">0</div>
         <div style="position:absolute; left:10rem;">
             <p class=Text5>Up to £500 <br>How many would you like to insure?</p></div>
        <div></div>
    </div>
</div>

  </div>

Answer 1

尝试使用jquery：

＆＃13;

#test {
  height: 100px;
  width: 100px;
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="showDiv" height="100px" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg">

<div id="test" style="display: none;"></div>

＆＃13;

x:

＆＃13;

Answer 2

您有几个错误导致一些卡纸。把它归结为骨头，有两个主要问题：

<强> 1。您没有参考实际按钮。

在HTML中，您的按钮元素如下所示：

<button id="toggleBtn">...</button>

这与您的javascript：

不对应

var elementToClick = document.querySelector(".togglebtn");

在javascript中，您引用的元素包含togglebtn的类，而不是 id （作为您的实际元素）。此外，javascript区分大小写，因此toggleBtn和togglebtn不匹配。我建议你更正HTML：

<button class="togglebtn">...</button>

<强> 2。您正在申请一个不存在的课程

点击该按钮后，您将课程show应用于.box1。但是，CSS中没有名为show的类。

将以下内容添加到当前的CSS中：

.show {
    display: block;
}
.box1 {
    display: none;
    /* ... the rest of the CSS declarations from .box1 here  */
}

显示或切换？

除了这些错误之外，您当前正在使用classList.add()。如果你只想展示一次元素，那就完全没问题了，但如果你真正要做的就是切换可见性（打开和关闭），你可以将其更改为classList.toggle()。

示例

以下是您可以执行此操作的示例：

var elementToClick = document.querySelector(".togglebtn"); var elementToShow = document.querySelector(".box1"); if(elementToClick) { elementToClick.addEventListener("click", showElement) } function showElement(){ elementToShow.classList.toggle("show"); }

.box1 { display: none; } .show { display: block; }

<button class="togglebtn">Button</button> <div class="box1" id="box1">This is box1</div>

Answer 3

您的元素应以显示值none：

开头

display:none;

在你的小提琴中，单击toggleBtn时会按预期添加'show'类，但默认情况下div元素已经显示了block。

您可以只将display:none添加到box1，然后添加show以将样式更新为display:block，然后在再次单击时删除show类，或者只是切换显示css属性。

https://codepen.io/anon/pen/GyyRPx

function toggleBox() {
  //use var if you are planning on running straight in browser
  const box = document.getElementById('box');
  const toggled = window.getComputedStyle(box).display === "block" ? "none" : "block";

  box.style.display = toggled;
}

document.getElementById('btn').addEventListener('click', toggleBox);

Answer 4

只需将click事件直接添加到img并相应处理：

document.getElementById('myImg').onclick = function(e) {
    document.getElementById('myDiv').style.display = 'block';
}

我建议对元素使用特定的id，以便更容易地操作元素。

在图片上显示div点击

4 个答案: