JavaScript를 사용하여 이미지를 클릭 할 때 수량 레이블 텍스트를 늘리거나 줄이려합니다 (아래쪽 화살표 .PNG).

Question

저는 E-Com 웹 사이트를 만들고 JavaScript를 사용하여 (위 아래 화살표 PNG와 같이) 이미지를 클릭하면 수량을 변경하려고합니다. 다음 이미지에서 볼 수 있듯이 링크를 넣었지만 이미지가 필요합니다. 그 대신 그 이미지를 클릭하고 해당 텍스트를 변경하고 싶습니다. 수량 레이블은 양수와 음수와 같습니다.
저는 JavaScript에 친숙하지 않으므로 친절하게도 어떤 식 으로든 제안 해 드리겠습니다. JavaScript를 사용하면 도움을 얻을 수 있습니다 .. Thanks.

 <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"> 

자바 스크립트

$(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 속성에 자바 스크립트 함수를 호출

예 -

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