Question

我正在处理一个cookie横幅，该横幅在用户单击“接受”后立即消失。我使用了w3schools和Google检查工具，但找不到区别：Banner1不起作用，但是Banner2有效。

横幅1

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>


<script>
	$(document).ready(function(){
		$("accept").click(function(){
		$("#CookieBanner").hide();
		});
	});
</script>
		
		
<div id="CookieBanner">
	<div class="agj">
		<div class="agj-content">
			<div class="initial-info">
			<h2 class="title">Privacy</h2>
			<p class="message">This website uses cookies to provide you with the best possible service and website functionality, and to provide social media features and analyse the traffic to our website. If you continue to use our website, you agree to our using cookies.
			</p>
			</div>
				<div class="buttons">
				<button id="accept">Accept</button>
				<a class="link" href="#" title="Get more Information about Cookies and how we use them">Show Purposes</a>
			</div>
		</div>
	</div>
</div>

</head>
<body>
<h1>Test Titel</h1>
<p> tesetsetetetestsette</p>
</body>
</html>

横幅2

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>


<script>
	$(document).ready(function(){
 		$("button").click(function(){
 	   	$('#AB').hide();
 		});
	});
</script>


<div id="AB">
	<div class="agj">
		<div class="agj-content">
        	<div class="initial-info">
        	<h1 class="titel">If you click on me, I will disappear.</h1>
			<p class="message">Click me away!
          	</p>
            </div>
            	<div class="buttons">
                <button id="button">Click me too!	</button>
				<a class="Link" href="#">Link</a>
                </div>
             </div>   
	</div>
</div>


</head>

</html>

这些代码是相同的，但是其中之一（banner1）不起作用。有任何想法吗？用户单击接受后，横幅必须消失。稍后在Cookie上对保存信息很有用，但现在我仍然不知道如何解决问题。

Answer 1

在第一个代码段中，您传递"accept"，它将选择标记名称为"accept"的元素

$("accept").click(function(){...}

您需要使用#来选择具有特定ID的元素。

$("#accept").click(function(){...}

在第二个代码段中，您选择"button"，因此将选择<button id="accept">Accept</button>，因为它的标签名称为"button"

注意：

在第二个代码段中，您将选择所有按钮并将click事件附加到所有按钮上。因此，如果页面上还有其他按钮，则单击它们也会隐藏横幅。

Answer 2

按钮的选择器是错误的，如果您想按ID选择按钮，则需要在ID名称前给我们＃

$("accept") --> $("#accept")

与

相同

$("button") --> $("#button")

第二个横幅有效，因为$（“ button”）表示按钮标签

为什么不起作用？问题出在哪里？

2 个答案:

注意：