JavaScriptを使用して、イメージをクリックしたときの数量ラベルのテキスト（上向き矢印.PNG）を増減したい。

Question

私が（のようなアップダウンPNG矢印）はJavaScriptを使用して画像をE-Comのウェブサイトを作成し、 のクリック時に数量を変更していますよ。 私はリンクを貼っていますが、画像が必要です その代わりに その画像をクリックしてください私はそのテキストを変更したい プラスとマイナスの数量のような数量ラベル。 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"> 

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>