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

Question

我正在创建一个电子商务网站并希望通过点击更改数量（如上下箭头 PNG）图像使用 JavaScript。正如您在下图中看到的，我已经输入 link 但我需要图像反而那个和点击那个图像我想改变那个的文本数量标签，如正负数量。
我对 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>

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

I want to increase and decrease quantity label text on click on image (up down arrow .PNG) using JavaScript.

.net

javascript

c#

asp.net

jscript