顺解淘宝ued前端小测试

最新推荐文章于 2025-01-22 17:47:07 发布

原创最新推荐文章于 2025-01-22 17:47:07 发布 · 200 阅读

CC 4.0 BY-SA版权

文章标签：

[url]http://ued.taobao.com/sts/join_us.php[/url]
路过，前端有题，正好得闲，写解温故：
[img]http://dl.iteye.com/upload/attachment/439964/01e51ea0-6aa0-35f6-9e23-01983b0ac9f9.gif[/img]

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>鞋色选项</title>
<style>
#shoesColorGroup label{
position:relative;
overflow:hidden;
display:inline-block;
cursor:pointer;
border:5px solid #fff;
width:100px;
height:100px;
background:url(shoes-color-sprite.png);
/*text-indent:-32767px; 为测试观察效果，临时注释掉*/
}
#shoesColorGroup .label-choose-checked{
border:5px solid #f00;
}
#shoesColorGroup .label-choose-checked::before{
content:"√";
position:absolute;
right:1px;
bottom:1px;
padding:2px;
background-color:#f00;
font-size:10px;
font-weight:bold;
text-indent:0;
color:#fff;
}
#shoesColorGroup #brown_label{
background-color:brown;
background-position:0 0;
}
#shoesColorGroup #darkkhaki_label{
background-color:darkkhaki;
background-position:-100px 0;
}
#shoesColorGroup #fuchsia_label{
background-color:fuchsia;
background-position:-200px 0;
}
#shoesColorGroup #brown_label.label-choose-checked{
background-position:0 -100px;
}
#shoesColorGroup #darkkhaki_label.label-choose-checked{
background-position:-100px;
}
#shoesColorGroup #fuchsia_label.label-choose-checked{
background-position:-200px -100px;
}
</style>
<script src="zCool.js"></script>
</head>
<body>
<form name="form1" method="post" action="">
<div id="shoesColorGroup">
<label for="brown" id="brown_label">
<input type="radio" name="shoesColor" id="brown">
咖啡色</label>
<label for="darkkhaki" id="darkkhaki_label">
<input type="radio" name="shoesColor" id="darkkhaki">
暗黄色</label>
<label for="fuchsia" id="fuchsia_label">
<input type="radio" name="shoesColor" id="fuchsia">
紫红色</label>
</div>
</form>
<script>

$(function(){

// 为单选按钮确定被包含的<label/>标签，并设置样式类
function setChooseLabelClass(radio){
$(radio).
ancestor('label')
[ radio.checked ? 'addClass' : 'removeClass' ]
('label-choose-checked');
};

// 确定选项组的根元素
$('#shoesColorGroup').
// 委托注册事件
click(function(e){
if( $.match(e.target, 'input[type=radio]') ){
$(this).
find('input[type=radio]', setChooseLabelClass);
}
});

});
</script>
</body>
</html>