我想使用 JavaScript 增加和减少点击图像（向上向下箭头 .PNG）时的数量标签文本。

Question

我正在创建一个电子商务网站，并希望通过点击更改数量 （如向上向下箭头 PNG）图像使用 JavaScript。 正如您在下图中看到的那样，我已经放置了链接，但我需要图像 反而 那个和点击那个图像我想改变那个文本 数量标签，如加号和减号。
我对 JavaScript 不太友好，所以请给我一些建议 使用JavaScript，任何帮助将不胜感激.. 谢谢。

        <div class="col-md-3 col-lg-3 col-sm-12 col-xs-12">
        <h3 id="h3" runat="server" style="font-size: 26px; color: 
         #F67777;">
        </h3>
        <asp:Label ID="lblSalePrice" runat="server" Style="font-size: 
        18px"></asp:Label><br />
        <asp:Label ID="lblMrp" runat="server" Style="font-size: 18px; 
        text-decoration: line-through;"></asp:Label>
        <asp:Label ID="lblDiscount" runat="server" Style="font-size: 
        18px; color:green; margin-left:5px"></asp:Label><br />
        <asp:Label ID="Quantity" runat="server" Text="Quantity : " 
        Style="font-size: 18px; color:green;" ></asp:Label>


        //Want to use image // 
        <asp:Label:ID="lblQuantity" runat="server" Style="font-size: 18px; 
        color:green; margin-left:5px"></asp:Label><br /> 
        **<a id="prev">Decrease Quantity</a><br />
        <a id="next">Increase Quantity</a><br />**


        <label class="hvr-skew-backward">
         <asp:Button ID="btnSubmit" class=" hvr-skew-backward"  
         runat="server" 
         Text="Place Order" Style="color: white; border:none; " 
         onclick="btnSubmit_Click" />             
         </label>
         <label class="hvr-skew-backward">
         <asp:Button ID="BtnCart" class=" hvr-skew-backward"  
         runat="server" 
         Text="Add to Cart" Style="color: white; border:none; " />
         </label>
        </div>

Answer 1

如果你愿意使用 jQuery，请看这个 Fiddle https://fiddle.jshell.net/9mvmpp55/

您可以使用图像代替锚点。 考虑使用基于矢量的图标，例如http://fontello.com

HTML

<a href="#" class="set-quantity increase">Increase</a>
<a href="#" class="set-quantity decrease">Decrease</a>

<input type="text" name="quantity" id="quantity">

Javascript

$(document).on('click', '.set-quantity', function(){
    var current_value = $('#quantity').val() > 0 ? $('#quantity').val() : 0

    if($(this).hasClass('increase')){
      var new_value = ++current_value
    }

    if($(this).hasClass('decrease')){
      var new_value = current_value == 0 ? 0 : --current_value
    }

    console.log(new_value)
    $('#quantity').val(new_value)  
    return false;
})

Answer 2

在锚标签内使用锚标签和图像（箭头图标），这样它就可以像可点击的图像一样工作。并在锚标记的 href 属性中调用您的 javascript 函数

示例 -

    <script language="javascript">
    function changeQty(qty){
        var currentQty = document.getElementById('lblSalePrice').value;
        currentQty = currentQty + qty;
        document.getElementById('lblSalePrice').value = currentQty;
    }
</script>

<a style="color:#000;text-decoration: none" href="javascript:changeQty(1)">
    <img src="images/add.png" border="0" title="UpArrow" />
</a>

<a style="color:#000;text-decoration: none" href="javascript:changeQty(-1)">
    <img src="images/add.png" border="0" title="DownArrow" />
</a>