关于前端js改变input值的问题

Question

关于用js来实现添加商品数量的效果：<tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td><b class="f_b">数量：</b><a class="a_biankuang">-</a><input name="" type="text" value="0" class="num_inp"/><a class="a_biankuang">+</a></td>
                    <td><b class="f_b">数量：</b><a class="a_biankuang">-</a><input name="" type="text" value="0" class="num_inp"/><a class="a_biankuang">+</a></td>
                    <td><b class="f_b">数量：</b><a class="a_biankuang">-</a><input name="" type="text" value="0" class="num_inp"/><a class="a_biankuang">+</a></td>
                    <td>&nbsp;</td>
                  </tr>我要的效果是：在页面不刷新的情况下，点“－”的时候，该input的值减1，点“+”的时候，该input的值加1，该怎么各自实现添加功能...这是参考地址：http://www.txy.net.cn/spot.php?id=164&x=591
就是商城里的添加产品数量，然后价格也随之改变...这位少侠是用rel来实现的...我看不懂...求高手指点...

Answer 1

如果你要实现的组数不多的话，可以给每个都定义不同的Id很容易实现，如果有很多组的话，建议用jQuery先取得上级的<td>标签，然后再获取子下面的input修改其显示的值。

Answer 2

对头...那个网站里就是获取td标签，完了再找input...我没看懂，求解释...

Answer 3

<input type="button" onclick="changenums(1,'num')" value="减去数量">
<input type="text" id="num" rel="对应产品的价格">
<input type="button" onclick="changenums(2,'num')" value="增加数量"><script type="text/javascript">
    function changenums(t,id){
    var _nums=document.getElementById(id).value;//这个是当前的数量
    var _price=document.getElementById(id).getAttribute("rel");//这个是价格
        if(t==1){
            //执行减去数量的操作
        }else{
            //执行增加数量的操作
        }
    }
</script>

Answer 4

那个参考网站使用的是jquery其加减数量的DOM结构为：
<td>
<a  class="a_biankuang" rel="1"  style=" cursor:pointer;">-</a>
<input name="" type="text" value="0" class="num_inp" rel="1" alt="111"/><
<a  class="a_biankuang" rel="1"  style=" cursor:pointer;">+</a>
</td>其执行加减数量的操作事件绑定代码[注释]
 
//绑定class=a_biankuang的click事件，于是，我们找到了一系列的加号和减号的那种区块
 $(".a_biankuang").click(function (){
    num=$(this)  //这个就是加或者减的那个
    .parent()  //回到其父级，也就是找到了<td>标签
    .find("input")  //找下面的input 也就找到了数量的那个input
    .val();//取其值
    rel=$(this)////这个就是加或者减的那个
    .attr('rel');//获取其 rel="这个值"。这个未例中定义：rel=1为减数量,rel=2为加数量
    
    if(rel==1){
        //执行减数量操作
        if(num>0){num--;$(this).parent().find("input").val(num);}  
    }else{
        //执行加数量操作
        num++;$(this).parent().find("input").val(num);  
    }
    //下面这句是执行数量*单价运算后在右边显示的功能函数  
    calculation();  })

Answer 5

呵呵，上面说那参考网站的DOM结构，顺手打快了<td>
<b class="f_b">数量：</b>
<a  class="a_biankuang" rel="1"  style=" cursor:pointer;">-</a>
<input name="" type="text" value="0" class="num_inp" rel="1" alt="111"/>
<a  class="a_biankuang" rel="2" style=" cursor:pointer;">+</a>
</td>

Answer 6

我试了，不起作用...
是不是jq里面，用val()来替代value...这个参数不怎么了解..

Answer 7

我测试的时候..这东西取不到input的值，这个跟数据类型有没有关系？后面num++,必须是数值才能加...input里面的0...被读取的是string类型还是int类型或者char？

Answer 8

先加载你的jquery
$(function(){
   $(".a_biankuang").click(function (){
    num=$(this)  //这个就是加或者减的那个
    .parent()  //回到其父级，也就是找到了<td>标签
    .find("input")  //找下面的input 也就找到了数量的那个input
    .val();//取其值
    rel=$(this)////这个就是加或者减的那个
    .attr('rel');//获取其 rel="这个值"。这个示例中的定义：rel=1为减数量,rel=2为加数量
    
    if(rel==1){
        //执行减数量操作
        if(num>0){num--;$(this).parent().find("input").val(num);}     
    }else{
        //执行加数量操作
        num++;$(this).parent().find("input").val(num);     
    }
    //下面这句是执行数量*单价运算后在右边显示的功能函数     
    //calculation();     })
})<td>
<b class="f_b">数量：</b>
<a  class="a_biankuang" rel="1"  style=" cursor:pointer;">-</a>
<input name="" type="text" value="0" class="num_inp" rel="1" alt="111"/>
<a  class="a_biankuang" rel="2" style=" cursor:pointer;">+</a>
</td>你用了jquery，你总不至于：num=$(this).parent().find("input").value这样来取值吧？？