Question

正如你在这个小提琴中看到的那样：http://jsfiddle.net/yjxzQ/11/它完美无缺。如果您单击“添加到购物车”链接，它会显示“已经在购物车中”div，然后单击刷新（或再次运行）并显示“已在购物车中”div

以下是测试帖子的链接：http://sitetestexample.blogspot.com/p/add-to-cart.html正如您所看到的，jquery根本不起作用。它甚至没有隐藏“已经在购物车中”的负载。

帖子中的代码与小提琴中的代码完全相同：

<a href="#" id="akready-in-cart">Already in Cart</a>
<a href="#" id="add-to-cart">Add to Cart</a>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.js"></script>
<script type="text/javascript"> 
$(function(){
$('#akready-in-cart').hide();
$('#add-to-cart').click(function(){

$('#add-to-cart').hide();
$('#akready-in-cart').show();
$.cookie('akready-in-cart', true);
});

$('#akready-in-cart').click(function(){
$('#add-to-cart').show();
$('#akready-in-cart').hide();

$.cookie('akready-in-cart', false);
});
if($.cookie('akready-in-cart') == 'true'){
$('#add-to-cart').click();
} else {
$('#akready-in-cart').click();
}
</script>


<style type='text/css'>
#akready-in-cart{
margin:5px 0 0 0;
padding:3px 5px;
background:red;
color:#fff;
font-weight: bold;
font-size: 24px;
display:inline-block;
text-decoration:none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
</style>

有什么想法吗？

Answer 1

您在代码中引用了jquery.js，但是（从我的测试页面可以看出）您的站点中没有jquery.js。

尝试下载jquery.js文件并将其放在您的网站上或更改：

<script type="text/javascript" src="jquery.js"></script>

为：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

JSFiddle工作但不在Blogger网站上：jQuery cookies

1 个答案: