Question

我的HTML就像这样

         <figure>
          <a href="">
            <div onmouseover="trash_display(event,this);" onmouseout="trash_out(event,this);"  class="roomandtrash">
                <img src="Iconos/bathroom2.png" alt="Bathroom" class="icon" >
                <img src="Iconos/tacho.png" alt="Trash"  class="trash_icon" onclick="display_box(event,this);">
            </div>  

            <div class="box">
                <h4 class="Messagebox">You are about to delete this room and all its devices. 
                </h4>
                <img src="Iconos/confirm.png" alt="Confirm" class="confirm">
                <img src="Iconos/cancel.png" alt="Cancel" class="cancel">
            </div>
          </a>
          <figcaption>Bathroom</figcaption>
        </figure>

当用户点击trash_icon时，＆＃39;图标＆＃39; class对象和＆＃39; trash_icon＆＃39;对象应该消失，然后一个正方形框＃39;应该出现。有些东西似乎是错误的，因为盒子只出现一秒钟，然后再次出现上面提到的图标。

这里的JS

function display_box(event, trash){

     var icon = trash.closest('div').querySelector('.icon');
     icon.style.display= "none";
     trash.visibility = "hidden";
     var box = trash.closest('a').querySelector('.box');
     box.style.display= "block";

}

Answer 1

这是我的答案。我添加了preventDefault来取消<a>事件并稍微调整一下代码。

function display_box(event, trash){

event.preventDefault();

  var icon = trash.closest('div').querySelector('.icon');
             icon.style.display= "none";
             trash.style.display= "none";

  var box = trash.closest('a').querySelector('.box');
      box.style.display= "block";

}

Onclick功能仅显示第二个

1 个答案: