jQuery找不到ID为的div

Question

我正在尝试使用jQuery将元素的显示样式更改为none(元素当前的显示样式为block(。

我有以下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()
});

关于错误：CCD_ 2将需要一个DOM元素。此外，您可能需要查看toggle((方法

Answer 3

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

在下面的例子中，您可以看到以"#joinRoom"为id的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>

Answer 4

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

试试这个方法。