为什么不起作用?问题出在哪儿? [关闭]

问题描述 投票:-5回答:2

我正在制作一个cookie横幅,一旦用户点击“接受”,它就会消失。我使用了w3schools和谷歌检查工具,但我找不到区别:Banner1不起作用但Banner2工作。

banner1

<!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>

banner2

<!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将有助于保存信息,但是现在我无法弄清楚如何解决问题。

javascript jquery html css banner
2个回答
1
投票

在第一个片段中,您传递"accept",它将选择标记名为"accept"的元素

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

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

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

在第二个片段中,您选择"button",因此<button id="accept">Accept</button>将被选中,因为它有标签名称"button"

Note:

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


0
投票

您的按钮选择器是错误的,如果您想在ID名称之前选择ID所需的按钮#

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

同样的

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

第二个横幅工作因为$(“按钮”)指的是按钮标签

© www.soinside.com 2019 - 2024. All rights reserved.