问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

购物车商品数量加减效果

头像
dema
    533673123

    如何实现左右点击减少和增加中间的值：

    这是云链接：http://codepen.io/anon/pen/wo...

    现在此感谢了！！！

    <html lang="en-US">
<head>
    <title>text</title>

</head>

<body>
  <span class = "reduce"><</span>
    <span class = "value">1</span>
   <span class = "plus" >></span>
    
  <span class = "reduce"><</span>
    <span class = "value">1</span>
   <span class = "plus">></span>

<script>
   
</script>
</body>
</html>
    htmljavascript
    阅读 15.5k
    3 个回答
    得票最新
    头像
    zegendary
      315311
      $('.reduce').on('click',function(){
  var dom = $(this).next('.value')
  var value = dom.text()
  value = parseInt(value,10)
  value -= 1
  dom.text(value)
})
$('.plus').on('click',function(){
  var dom = $(this).prev('.value')
  var value = dom.text()
  value = parseInt(value,10)
  value += 1
  dom.text(value)
})
      头像
      undefind_5
        1.5k1297133

        你是以获取CLASS属性名来获取的节点，从而绑定事件的方式，那么问题来了，你每获取一次，都会生成一个数组，事件绑定给数组内的哪一个？

        <span class = "reduce" id="prove"><</span>

            <span class = "value">1</span>
       <span class = "plus" id="next">></span>
    <script>
        var add=document.getElementById("next");
        var del=document.getElementById("prove");
        var val=document.getElementsByClassName("value")[0];
        var value=val.innerHTML;
        add.onclick=function(){
            addn();
        }
        
        del.onclick=function(){
            deln();
        }
        
        function addn(){//你可以给另一个按钮绑定加法事件，直接调用就可以实现
            value++;
            val.innerHTML=value;
        }
        function deln(){//你可以给另一个按钮绑定减法法事件，直接调用就可以实现
            if(value!=0){
                value--;
                val.innerHTML=value;
            }else{
                val.innerHTML=0;
            }
        }
        头像
        xiatianlong
          2.2k43054
          <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    
    $(function(){
        $(".add").on("click", function(){
            // 先找到当前加号的父元素class="line"的div,再寻找当前div下的文本框class="amount" 
            var $countInput = $(this).parent(".line").children(".count");
            $countInput.val($countInput.val()-0+1);
        });
        $(".reduce").on("click", function(){
            var $countInput = $(this).parent(".line").children(".count");
            if ($countInput.val()-0 > 0){
                $countInput.val($countInput.val()-1);
            }
        });
    });
    
</script>
<style>
    #div{
        width:300px;margin:50px auto;
    }
    .add,.reduce{
        cursor:pointer;
    }
    .add:hover,.reduce:hover{
        color:red;
    }
    .line{
        margin-top:10px;
    }
</style>
</head>
<body>

    <div id="div">
        <div class="line">
            <span class="add">+</span>&nbsp;<input type="number" class="count" value="0" readonly/>&nbsp;<span class="reduce">-</span>
        </div>
        <div class="line">
            <span class="add">+</span>&nbsp;<input type="number" class="count" value="0" readonly/>&nbsp;<span class="reduce">-</span>
        </div>
        <div class="line">
            <span class="add">+</span>&nbsp;<input type="number" class="count" value="0" readonly/>&nbsp;<span class="reduce">-</span>
        </div>
        <div class="line">
            <span class="add">+</span>&nbsp;<input type="number" class="count" value="0" readonly/>&nbsp;<span class="reduce">-</span>
        </div>
    </div>
    
</body>
</html>
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题