Question

我是Javascript / Jquery的新手，目前正在编写一个在线购物网站。我想编写一个函数，这样每当我点击图片'buy_btn.jpg'时，购物车中的商品数量就会增加1。

这是我的js代码：

$('img[alt="buy"]').click(function(){
    var item_bought = $(".shopNum").val();
    item_bought++;
    $(".shopNum").html(item_bought);
})

这是我的按钮和购物车编号的html代码：

<div class = "topr_bot">
    <div class = "topr_bot_left">
        <img src = "image/buy_btn.jpg" alt="buy"> //this is the "add to 
        <p>Attention: This item will ONLY provide a normal receipt</p>
        </div>
    <div class = "topr_bot_right">
        <img src = "image/buy_btn.jpg" alt="buy2">
        </div>
    </div>
    <div class="shopCar fr">
        <span class="shopText fl">Shopping Cart</span>
        <span class="shopNum fl">0</span>
    </div>

问题是，我试图通过其alt标签获取图像并使用alert和console.info()进行调试，但没有弹出/出现。是因为我用错误的方式通过alt获取图像，还是因为我不应该将click()放到img上？

谢谢。

Answer 1

我认为您的shopnum的值正在作为string返回，现在最好的办法就是在宣布购买项目时使用jquery parseInt()函数。这应该有希望解决你的问题。

Answer 2

您遇到的主要问题是您使用val()从span获取号码。您应该使用text()代替。另请注意，在对数据进行任何数学运算之前，您应该使用parseInt()将值转换为数字。虽然你所拥有的将会起作用，但由于隐式强制，它并不可靠。试试这个：

＆＃13;

$('img[alt="buy"]').click(function() {
  var item_bought = parseInt($(".shopNum").text()) || 0;
  $(".shopNum").html(++item_bought);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topr_bot">
  <div class="topr_bot_left">
    <img src="image/buy_btn.jpg" alt="buy"> //this is the "add to
    <p>Attention: This item will ONLY provide a normal receipt</p>
  </div>
  <div class="topr_bot_right">
    <img src="image/buy_btn.jpg" alt="buy2">
  </div>
</div>
<div class="shopCar fr">
  <span class="shopText fl">Shopping Cart</span>
  <span class="shopNum fl">0</span>
</div>

＆＃13;

可以在jQuery中的<img/>上使用click（）吗？

2 个答案: