HTML:Div点击功能不起作用(amateaur)

时间:2017-04-06 02:50:06

标签: javascript jquery html css

我在剧本中遇到问题:

new

我希望点击$('.box').click(function () {$("input[type='image']").click(); }); 元素从用户pc上传图像文件。 当我使用"括号"编写我的代码,它也显示错误:

    在定义之前使用了
  1. <p>
  2. 缺少$声明。
  3. Here是我的代码。

    我在javascript中编码错误了吗? 在此先感谢:)

1 个答案:

答案 0 :(得分:1)

如果我理解你的正确跟随会帮助你

<input type="image">是图形提交按钮。不是文件上传按钮

要上传文件,您需要使用<input type="file">

$('div.box').on('click',function() {
  $("input[type='file']").trigger('click');
});
.pic {
  height: 638px;
  width: 938px;
  background-image: url('https://lh3.googleusercontent.com/sYpfIOEWajHnFESqdf0D4u1Kym0ErKpQ4gDn_Rwkxh3VxOrXw1cKgj-DZaNvVrAHpkhklQHNmBVHLhLbr57Le1699Hiibqm96oC-czexuHcn-LBkx5lKz_y9CQwvh_haCjDis7MDjhCOnIr2NU3eApw4ldE6riAo_PaqCH-oqDB2ZAIsFjiJTOqIEdAFBxSEWXNtVn4UOzqyk3y1ViAAS7XJ6gmxnh4zmVvIcUdzlhEOBKPIWnerm7OMBQ5N6zQK7pvgmHZ-SHEQWTpRN-B9ohdHsy8eHknlw7fYcUtI6JqOAZ0G93TJEuay-CU9WB8_3zf6OJsPpO-bWNa3AxEqeHRfUAHLiarTW_vBviDo6y8cvEIvGxe6OXGojbjSstRWq-Re-oYiZMkDnPuvloXETA7A84U9hGSkKU_eQoIpPhqOUH3diz1u8vVocWts6u7lOiHde7nqgrOEFQt1Cgu3jJaJ7oAzVEHeNWg7EhLQL33RQJEhL8p1R8X70QMttUkLEZjSVFNdSRKxEC7YZIj9gJel04Qz2Q8jwd3qcHZNaANwKI8TdAS0hWzDoPgWp1nATDM-Vx775-4Mpo7hR2Dr3hBR1ougQRm5p0-Rlqdft1gtqaM1JWfMr-TCfJE09ceJfUzGqR3Wfmr519NDpK_x317gh0_Z8kB8MwvYBKZS-g=w958-h638-no');
  background-repeat: no-repeat;
}

.box {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #FFF;
  -webkit-filter: blur(0);
  transform: matrix3d(3.356071, -0.24874, 0, 0.002092, 0.702007, 2.436204, 0, -0.000061, 0, 0, 1, 0, 61, 147, 0, 1);
  transform-origin: 0px 0px 0px;
  cursor: pointer;
  border:2px solid red;
}

.box>p {
  font-family: georgia;
  line-height: o.45em;
  font-size: 12px;
  text-align: center;
}

#upload {
  display: none;
}
<body>
  <h1>Sample page</h1>
  <div class="pic">
    <input type="file" id="upload" />
    <div class="box">
      <p>...........</p>
      <p>Add Screenshot</p>
      <p>within this</p>
      <p>red border</p>
      <p>...........</p>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src='java.js'></script>
</body>

@更新基于评论: -

当您将$("p")更改为$(".box")时,它会创建递归调用。 为了避免这种情况,您需要将<input type="file" id="upload" />放在div box之外。

此外,您可以将脚本和链接标记放置在文档中的任何位置,如果您在加载body元素之前将主体浏览器加载脚本之前放置它,并将它放在body标记之后

Recomented方法是在主体之后加载脚本,因为它将在加载脚本之前将所有元素加载到DOM,这将改善网页性能,并且还将减少导致在加载之前引用DOM元素的冲突< / p>