Question

我的网站上有this Jfiddle。在jfiddle工作，但不是活。为什么？可能是因为我在jfiddle上使用了3个单独的代码块并试图在同一个实时HTML页面上使用它们吗？当我加载网站页面时，（假设）隐藏的Div完全可见，单击图标（事件触发器）既不隐藏div也不显示它也不做任何事情。

我网站上使用的代码：

<style type="text/css">
  #divNotifi {
    height: 30px; width: 200px; position:absolute; 
    top: 200px; left: 20px;  display:none
  }
</style>

<script type="text/javascript">
  $(document).on('click', function(e) {
    var elem = $(e.target).closest('#btnNoti5'),
        box  = $(e.target).closest('#divNotifi');

    if ( elem.length ) {
        e.preventDefault();
        $('#divNotifi').toggle();
    }else if (!box.length){
        $('#divNotifi').hide();
    }
  });
</script>


<a class="icon hide-text" id="btnNoti5" href="#">
  <img border="0" src="videoicon.jpg" />
</a>
<form method="POST">
  <!-- blah blah foo foo big form with 20 buttons and 88 input fields -->
  <div id="divNotifi">
    <table border="0">
      <tr>
        <td class="R1C1">TITLE:</td>
        <td class="R1C2">
          <input type="text" name="title" id="title" size="32"
                 placeholder="Enter the video title">
        </td>
      </tr>
    </table>
  </div>
</form>

Answer 1

首先，您可以像这样简化代码：

$(document).ready(function() {

  button = $('#btnNoti5');
  box = $('#divNotifi');

  button.on('click', function(e) {
    e.preventDefault();
    box.toggle();
  });
});

其次，如果要显示多张照片和要显示的文本框，可以将其封装到如下函数中：

function create_button(button_id, textbox_id) {
  button = $(button_id);
  box = $(textbox_id);

  button.on('click', function(e) {
    e.preventDefault();
    box.toggle();
  });
}

$(document).ready(function() {
  create_button('#btnNoti5', '#divNotifi');

  // add as many as needed:
  create_button('#btn1million', '#div1million');
});

这里是jsfiddle。

img点击取消隐藏隐藏的div。适用于jsfiddle，但不适用于实时网站

1 个答案: