我想使用JavaScript在點擊圖片（上下箭頭.PNG）時增加和減少數量標簽文本。

Question

我正在創建一個E-Com網站，並希望更改使用JavaScript單擊（如上下箭頭PNG）圖像時的數量。 如您在以下圖像中看到的，我放置了鏈接，但我需要圖像而不是圖像，單擊該圖像時，我想更改該“數量”標簽的文本，例如加減數量。
我對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，請參閱此小提琴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">

Java腳本

$(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>