jquery $(this).val()不明白在下例子中指哪个元素？？

我的问题如题：
问题的地方做了标记：my question!!------------------------------------->>>>>>>>>>
<script type="text/javascript">
function addTotal()
{
//计算总价格的函数
var fTotal = 0;
//对于选中了的复选项进行遍历
$(":checkbox:checked").each(function()//遍历每一个被选中的多选框执行的函数
{
//获取每一个的数量
var iNum = parseInt($(this).parent().find("input[type=text]").val());
//获取每一个的单价
var fPrice = parseFloat($(this).parent().find("span[price]").attr("price"));
fTotal += iNum * fPrice;
});
$("#totalPrice").html("合计￥"+fTotal+"元");
}
$(function()//页面加载完后要执行的函数
{
$(":checkbox").click(function()//每一个多选框的点击调用函数
{
var bChecked = this.checked;//取出是否点击的值
//如果选中则显示子菜单
$(this).parent().find(".detail").css("display",bChecked?"block":"none");
$(this).parent().find("input[type=text]")
//每次改变选中状态，都将值重置为1，触发change事件，重新计算价格
.attr("disabled",!bChecked).val(1).change() //change()下面定义了
  .each(function()//使用一个函数好执行下面的事
  {
//需要聚焦判断，因此采用each来插入语句
if(bChecked) this.focus();//数量框自动聚焦
});
});
$("span[price] input[type=text]").change(function()
{//每一个数量框的值的改变都会调用这个函数
//根据单价和数量计算价格            my question!!------------------------------------->>>>>>>>>>
$(this).parent().find("span").text( $(this).val() * $(this).parent().attr("price") );
addTotal(); //计算总价格
});
//加载页面完全后，统一设置输入文本框
$("span[price] input[type=text]")
.attr({ "disabled":true,//文本框为disable
"value":"1", //表示份数的value值为1
"maxlength":"2" //最都只能输入2位数（不提供100份以上）
}).change(); //触发change事件，让span都显示出价格
});
</script>
</head><body>
<div>
1. <input type="checkbox" id="LiangCaiCheck"><label for="LiangCaiCheck">凉菜</label>
<span price="0.5"><input type="text" class="quantity"> ￥<span></span>元</span>
<div class="detail">
<label><input type="radio" name="LiangCai" checked="checked">拍黄瓜</label>
<label><input type="radio" name="LiangCai">香油豆角</label>
<label><input type="radio" name="LiangCai">特色水豆腐</label>
<label><input type="radio" name="LiangCai">香芹醋花生</label>
</div>
</div>
    
<div>
2. <input type="checkbox" id="SuCaiCheck"><label for="SuCaiCheck">素菜</label>
<span price="1"><input type="text" class="quantity"> ￥<span></span>元</span>
<div class="detail">
<label><input type="radio" name="SuCai" checked="checked">虎皮青椒</label>
<label><input type="radio" name="SuCai">醋溜土豆丝</label>
<label><input type="radio" name="SuCai">金勾豆芽</label>
</div>
</div>
    
<div>
3. <input type="checkbox" id="HunCaiCheck"><label for="HunCaiCheck">荤菜</label>
<span price="2.5"><input type="text" class="quantity"> ￥<span></span>元</span>
<div class="detail">
<label><input type="radio" name="HunCai" checked="checked"/>麻辣肉片</label>
<label><input type="radio" name="HunCai">红烧牛柳</label>
<label><input type="radio" name="HunCai">糖醋里脊</label>
</div>
</div>
    
<div>
4. <input type="checkbox" id="SoupCheck"><label for="SoupCheck">热汤</label>
<span price="1.5"><input type="text" class="quantity"> ￥<span></span>元</span>
<div class="detail">
<label><input type="radio" name="Soup" checked="checked"/>西红柿鸡蛋汤</label>
<label><input type="radio" name="Soup">南瓜汤</label>
</div>
</div><div id="totalPrice"></div>
</body>
</html>

解决方案 »

  1.   

    你可以alert（）；看看。
    但我觉得 是指 addTotal 这个函数
      

  2.   

    上面说错啦。。  $(":checkbox:checked").each(function()//遍历每一个被选中的多选框执行的函数
                {
                    //获取每一个的数量
                    var iNum = parseInt($(this).parent().find("input[type=text]").val());
                    //获取每一个的单价
                    var fPrice = parseFloat($(this).parent().find("span[price]").attr("price"));
                    fTotal += iNum * fPrice;
                });
    这个this指的是 循环 的checkbox 对象
    你可以alert（this.type）;看看
    下面也是一样。
      

  3.   

    $("span[price] input[type=text]").change(function()
    {
    //根据单价和数量计算价格
    $(this).parent().find("span").text( $(this).val() * $(this).parent().attr("price") );
    };首先说的是选择器：
    $("span[price] input[type=text]")
    这里面是两部分，前面span[price] 这个是选择所有包含 price这个属性的span 把这个集合称作①
    然后在①这个集合里面 再根据input[type=text]选择 所有标签是input 包含属性为type=text的所有输入框 称作②
    .change() 的意思是对②中的元素当发生改变事件的时候执行里面的function
    然后就是你想要的$(this) 这里的this指代的是 ②中某一个元素的对象(可以理解为那个input对象，document.getElementById("xx");这里的xx可以理解为②集合中的某一个input框)，而$(this)指的是将这个对象放入jquery对象中用代码解释 this 和 $(this) 的区别
    <input type="text" id="xx">
    document.getElementById("xx"); 这个就是this的对象
    $("#xx"); 这里获取的就是 $(this)对象
      

  4.   

    看了各位的回答，我想它应该是指输入框，它就是要把数量取出来，再乘以单价。但有个疑问就是它前面的
    $(this).parent().find("span").text(...)方法表明是指向span这个元素的，这时候this应该指的是span元素啊，怎么会是输入框呢？
      

  5.   

    <span price="1.5"><input type="text" class="quantity"> ￥<span>10</span>元</span>既然你明白了this是指的输入框那就好办了！
    $(this).parent().find("span").text( $(this).val() * $(this).parent().attr("price") );$(this).parent()通过input获取到父元素节点的jquery对象，也就是span
    我想你这里 ￥ 应该是个价格比如 10 20
    $(this).val() 这里的this指的就已经不是前面的输入框了，而是通过$(this).parent().find("span")获取到了我上面红色字体的10，我想这里应该是程序填入的部分，你好像把代码删除了！$(this).parent().attr("price") 这个很好理解了，this是10外面的那个span 他的父元素→也就是最外面的span，attr("price")也就是获取这个对象的值→1.5 元这样应该没有什么疑问了吧
      

  6.   

    汗居然不能编辑
    写错了一点
    $(this).parent().find("span")获取的是内层的span ，然后加上.val() 才是我标注的10最后，写这个代码的人jquery用的真令人无语啊
      

  7.   

    感谢你耐心的回答，但要说明一点，我把代码全贴出来了，没有删除你说的代码。而且内层span初始是没有值的，正如上面的html代码所示。现在有一点清楚了，$(this)指的是内层的span因为它与$(this).parent().attr("price") 中的$(this)是同等地位，但它的val()没有内容啊，即使有内容它也是相当于这一种菜的最后总价，为什么还要乘以单价呢？？？？、、？