对 jquery in action 中的例子有疑问，求高人解答
时间：2009-09-08
来源：互联网
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bamboo Asian Grille - Online Order Form</title>
<link rel="stylesheet" type="text/css" href="bamboo.css">
<script type="text/javascript"
src="../../scripts/jquery-1.2.1.js"></script>
<script type="text/javascript">
$(function(){
$('fieldset div div').hide();
$(':checkbox').click(function(){
var checked = this.checked;
$('div',$(this).parents('div:first'))
.css('display',checked ? 'block':'none');
$('input[type=text]',$(this).parents('div:first'))
.attr('disabled',!checked)
.css('color',checked ? 'black' : '#f0f0f0')
.val(1)
.change()
.each(function(){ if (checked) this.focus(); });
});
$('span[price] input[type=text]').change(function(){
$('~ span:first',this).text(
$(this).val() *
$(this).parents("span[price]:first").attr('price')
);
});
$('span[price] input[type=text]').change();
});
</script>
</head>
<body>
<h1>Bamboo Asian Grille</h1>
<h2>Online Order Menu</h2>
<fieldset>
<legend>Appetizers</legend>
<div>
<label>
<input type="checkbox" name="appetizers"
value="imperial"/>
Fried Imperial rolls (2)
</label>
<span price="3">
<input type="text" name="imperial.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="imperial.option"
value="pork" checked="checked"/>
Pork
</label>
<label>
<input type="radio" name="imperial.option"
value="vegetarian"/>
Vegetarian
</label>
</div>
</div>
<div>
<label>
<input type="checkbox" name="appetizers" value="spring"/>
Spring rolls (2)
</label>
<span price="4">
<input type="text" name="spring.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="spring.option" value="pork"
checked="checked"/>
Pork
</label>
<label>
<input type="radio" name="spring.option"
value="shrimp"/>
Pork and Shrimp
</label>
<label>
<input type="radio" name="spring.option"
value="vegetarian"/>
Vegetarian
</label>
</div>
</div>
<div>
<label>
<input type="checkbox" name="appetizers" value="vnrolls"/>
Vietnamese rolls (4)
</label>
<span price="5">
<input type="text" name="vnrolls.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="vnrolls.option" value="pork"
checked="checked"/>
Pork
</label>
<label>
<input type="radio" name="vnrolls.option"
value="shrimp"/>
Pork and Shrimp
</label>
<input type="radio" name="vnrolls.option"
value="vegetarian"/>
<label>Vegetarian</label>
</div>
</div>
<div>
<label>
<input type="checkbox" name="appetizers" value="rangoon"/>
Crab rangoon (8)
</label>
<span price="6">
<input type="text" name="rangoon.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="rangoon.option"
value="sweet checked="checked"/>
Sweet-and-sour sauce
</label>
<label>
<input type="radio" name="rangoon.option" value="hot"/>
Hot mustard
</label>
<label>
<input type="radio" name="rangoon.option" value="both"/>
Both
</label>
</div>
</div>
<div>
<label>
<input type="checkbox" name="appetizers"
value="stickers"/>
Pot stickers (6)
</label>
<span price="5">
<input type="text" name="stickers.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="stickers.option"
value="pork" checked="checked"/>
Pork
</label>
<label>
<input type="radio" name="stickers.option"
value="vegetarian"/>
Vegetarian
</label>
</div>
</div>
<div></div>
</fieldset>
</body>
</html>
以上为jquery in action 的示例代码chapter4中的bamboo例子
今天在做这个练习。源代码的jquery版本是1.2.1的，我把jquery的版本换成1.3.2，去做。问题来了：
$('~ span:first',this).text(
$(this).val() *
$(this).parents("span[price]:first").attr('price')
);
这段代码的意思是，页面初始加载，就会去计算价格，并将值显示在选择器选择的那个标签上。1.2.1有效果，可是换成了1.3.2后就没有效果了。
我觉得问题可能是出在这个$('~ span:first',this)选择器。为什么1.2.1有效果，1.3.2没效果呢？
这版本之间有什么变化？
新手刚入门。头疼，折腾的挺久也没明白，望好心人解答。
<html>
<head>
<title>Bamboo Asian Grille - Online Order Form</title>
<link rel="stylesheet" type="text/css" href="bamboo.css">
<script type="text/javascript"
src="../../scripts/jquery-1.2.1.js"></script>
<script type="text/javascript">
$(function(){
$('fieldset div div').hide();
$(':checkbox').click(function(){
var checked = this.checked;
$('div',$(this).parents('div:first'))
.css('display',checked ? 'block':'none');
$('input[type=text]',$(this).parents('div:first'))
.attr('disabled',!checked)
.css('color',checked ? 'black' : '#f0f0f0')
.val(1)
.change()
.each(function(){ if (checked) this.focus(); });
});
$('span[price] input[type=text]').change(function(){
$('~ span:first',this).text(
$(this).val() *
$(this).parents("span[price]:first").attr('price')
);
});
$('span[price] input[type=text]').change();
});
</script>
</head>
<body>
<h1>Bamboo Asian Grille</h1>
<h2>Online Order Menu</h2>
<fieldset>
<legend>Appetizers</legend>
<div>
<label>
<input type="checkbox" name="appetizers"
value="imperial"/>
Fried Imperial rolls (2)
</label>
<span price="3">
<input type="text" name="imperial.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="imperial.option"
value="pork" checked="checked"/>
Pork
</label>
<label>
<input type="radio" name="imperial.option"
value="vegetarian"/>
Vegetarian
</label>
</div>
</div>
<div>
<label>
<input type="checkbox" name="appetizers" value="spring"/>
Spring rolls (2)
</label>
<span price="4">
<input type="text" name="spring.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="spring.option" value="pork"
checked="checked"/>
Pork
</label>
<label>
<input type="radio" name="spring.option"
value="shrimp"/>
Pork and Shrimp
</label>
<label>
<input type="radio" name="spring.option"
value="vegetarian"/>
Vegetarian
</label>
</div>
</div>
<div>
<label>
<input type="checkbox" name="appetizers" value="vnrolls"/>
Vietnamese rolls (4)
</label>
<span price="5">
<input type="text" name="vnrolls.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="vnrolls.option" value="pork"
checked="checked"/>
Pork
</label>
<label>
<input type="radio" name="vnrolls.option"
value="shrimp"/>
Pork and Shrimp
</label>
<input type="radio" name="vnrolls.option"
value="vegetarian"/>
<label>Vegetarian</label>
</div>
</div>
<div>
<label>
<input type="checkbox" name="appetizers" value="rangoon"/>
Crab rangoon (8)
</label>
<span price="6">
<input type="text" name="rangoon.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="rangoon.option"
value="sweet checked="checked"/>
Sweet-and-sour sauce
</label>
<label>
<input type="radio" name="rangoon.option" value="hot"/>
Hot mustard
</label>
<label>
<input type="radio" name="rangoon.option" value="both"/>
Both
</label>
</div>
</div>
<div>
<label>
<input type="checkbox" name="appetizers"
value="stickers"/>
Pot stickers (6)
</label>
<span price="5">
<input type="text" name="stickers.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="stickers.option"
value="pork" checked="checked"/>
Pork
</label>
<label>
<input type="radio" name="stickers.option"
value="vegetarian"/>
Vegetarian
</label>
</div>
</div>
<div></div>
</fieldset>
</body>
</html>
以上为jquery in action 的示例代码chapter4中的bamboo例子
今天在做这个练习。源代码的jquery版本是1.2.1的，我把jquery的版本换成1.3.2，去做。问题来了：
$('~ span:first',this).text(
$(this).val() *
$(this).parents("span[price]:first").attr('price')
);
这段代码的意思是，页面初始加载，就会去计算价格，并将值显示在选择器选择的那个标签上。1.2.1有效果，可是换成了1.3.2后就没有效果了。
我觉得问题可能是出在这个$('~ span:first',this)选择器。为什么1.2.1有效果，1.3.2没效果呢？
这版本之间有什么变化？
新手刚入门。头疼，折腾的挺久也没明白，望好心人解答。
[ 此帖被jquery666在2009-09-08 17:43重新编辑 ]
作者: jquery666 发布时间: 2009-09-08
弄出来了
1.3.2版下这样写$('~ span:first',this)没有效果
改成('+ span',this) 1.3.2下这个选择器就成功了，也达到了同样的效果。
但1.3.2相比 jquery in action 中使用的1.2.1具体有哪些差别还没弄懂就是了...
1.3.2版下这样写$('~ span:first',this)没有效果
改成('+ span',this) 1.3.2下这个选择器就成功了，也达到了同样的效果。
但1.3.2相比 jquery in action 中使用的1.2.1具体有哪些差别还没弄懂就是了... 作者: jquery666 发布时间: 2009-09-08
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
