Question

jQuery 无法找到 ID 为 [重复] 的 div

2020-11-23

178

javascript html jquery css

我尝试使用 jQuery 将元素的显示样式更改为无（元素当前显示样式为块）。

我有以下 HTML：

<div id="loginModal">
   <div id="modalContent">
      <h1>Welcome To Crunch</h1>
      <br/>
      <span id="codeValidator">Please Enter A Valid Code</span><br/>
      <input type="text" id="codeInput" placeholder="Enter Room Code" /><br/>
      <input type="text" id="usernameInput" placeholder="Enter Username" /><br/>
      <button id="joinRoom">Join Room</button>
   </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="app.js"></script>

以及 app.js 中的以下 Javascript：

$('#joinRoom').click(() => {
    $('#loginModal').style.display = 'none';
});

但是，每当我单击加入房间按钮时，我都会收到以下错误： app.js:4 Uncaught TypeError: Cannot set property 'display' of undefined

为什么会发生这种情况，我该如何修复？

Answer 1

您正在尝试与对象 jquery 进行通信，而不是与 DOM 元素进行通信。这意味着语法应该是 jquery，而不是 javascript！

试试这个：

$('#joinRoom').click(() => {
    $('#loginModal').css('display', 'none');
});

$('#joinRoom').click(() => {
    $('#loginModal').css('display', 'none');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loginModal">
   <div id="modalContent">
      <h1>Welcome To Crunch</h1>
      <br/>
      <span id="codeValidator">Please Enter A Valid Code</span><br/>
      <input type="text" id="codeInput" placeholder="Enter Room Code" /><br/>
      <input type="text" id="usernameInput" placeholder="Enter Username" /><br/>
      <button id="joinRoom">Join Room</button>
   </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="app.js"></script>

Answer 2

您正在将 DOM 元素与 jQuery 混合使用。由于您正在使用 jQuery 库，因此您只需使用 show() 和 hide() 方法即可以下是简单干净的修改

$('#joinRoom').click(() => {
    $('#loginModal').hide()
});

关于错误： .style.display = 'none' 将需要一个 DOM 元素。您可能还想查看 toggle() 方法

Answer 3

从您的代码中，我发现您想要更改特定 div 的 css。要更改 dom 元素的 css 属性，您可以使用 dom 元素的 .css() 函数。

在下面的示例中，您可以看到 id 为“#joinRoom”的 dom 元素的点击函数的回调函数之间的差异。

$(document).ready(function() {
  $('#joinRoom').click(function() {
    // change your css changing code line with below line
    $('#loginModal').css('display', 'none');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="loginModal">
  <div id="modalContent">
    <h1>Welcome To Crunch</h1>
    <br/>
    <span id="codeValidator">Please Enter A Valid Code</span><br/>
    <input type="text" id="codeInput" placeholder="Enter Room Code" /><br/>
    <input type="text" id="usernameInput" placeholder="Enter Username" /><br/>
    <button id="joinRoom">Join Room</button>
  </div>
</div>