Question

我的项目中的href链接无法点击，我有这个HTML和javascript，并且我的HTML中的href不可点击，他们想要显示我的购物车。有人可以帮我弄清楚出了什么问题吗？我尝试了任何解决方法。

<!DOCTYPE html>
<html>
<head>
<title>Words</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="words.css" type="text/css"/>
<script type="text/javascript" src="words.js"></script>
</head>
<body>
<h1>Shopping Cart</h1>

<div>
<ul>
    <li><a class="add-to-cart" href="#" data-name="Apple" data-price="1.22">
</a>Apple $1.22</li>
    <li><a class="add-to-cart" href="#" data-name="Banana" data-price="1.33">
</a>Apple $1.22</li>
    <li><a class="add-to-cart" href="#" data-name="Shue" data-price="22.33">
</a>Apple $1.22</li>
    <li><a class="add-to-cart" href="#" data-name="Frisbee" data-price="5.22">
</a>Apple $1.22</li>

</ul>
    <button id="clear-cart">Clear cart</button>
</div>

<div>
<ul id="show-cart">
    <li></li>
    </ul>
</div>

</body>
</html>

JavaScript

$(".add-to-cart").click(function(event) {
    event.preventDefault();
    var name = $(this).attr("data-name");
    var price = Number($(this).attr("data-price"));

    addItemToCart(name, price, 1);
        displayCart();
    });

    function displayCart() {
        var cartArray = listCart();
        var output = "";
        for (var i in cartArray) {
            output += "<li>" + cartArray[i].name + " " + cartArray[i].count + "</li";
        }
        $("#show-cart").html(output);
    }
});

Answer 1

您的链接不可克服，因为您在错误的位置发布了标记的结尾。这是正确的代码：

<ul>
    <li><a class="add-to-cart" href="#" data-name="Apple" data-price="1.22">
    Apple $1.22</a></li>
    <li><a class="add-to-cart" href="#" data-name="Banana" data-price="1.33">
    Apple $1.22</a></li>
    <li><a class="add-to-cart" href="#" data-name="Shue" data-price="22.33">
Apple $1.22</a></li>
    <li><a class="add-to-cart" href="#" data-name="Frisbee" data-price="5.22">
Apple $1.22</a></li>

</ul>

在HTML5和旧版本中，结束标记应始终按照正确的顺序排列：

<tag1><tag2><tag3></tag3></tag2></tag1>

如果您使用链接标记，则应该记住在内容结尾处发布结束标记，如下所示：

<a href="someurl.html">  Clicable content </a>

我的项目中的href链接无法点击

1 个答案: