ReMinD

昨天闲逛UED的时候发现好像UED招人哪，然后发现前端开发版面的一个题目，如下：

感觉这不难实现，就是括号里的不怎么明白- -！结果稍微试了下发现表单按钮，复选框之类都是不能直接用CSS来加载图片的，想了会，思路就是在按钮后加一个label标签来实现了。点击这里可以看下做好的DEMO

<form action="#" method="get" name="form">
<input type="radio" name="shoes" value="shoe1" />
<input type="radio" name="shoes" value="shoe2" />
<input type="radio" name="shoes" value="shoe3" />
</form>

遵循html语义化什么的，HTML结构就上面这么简单了。

后面的思路是这样的:

通过JS给每个input增加一个外围DIV,设置相对定位，给下面label元素定位提供一个参照元素
在每个input后面增加一个label标签
给每个label标签增加背景图片
当点击相应的label标签时在label后增加一个i标签，显示选中状态，同时去掉其他label标签后的i标签

思路很简单的嘎，但是还是没想到怎么个优雅降级法- -！下面是JS:(话说原生JS真的很繁琐= =！还是我写的太繁琐啦。。)

var radios=document.getElementsByTagName('input');

	for(var i=0;i<radios.length;i++){
		radios[i].setAttribute('id','shoe'+(i+1));
		var _radio=radios[i].cloneNode(true);
		var out=document.createElement('div');
		out.setAttribute('class','out');
		out.appendChild(_radio);
		radios[i].parentNode.replaceChild(out,radios[i]);
		var _label=document.createElement('label');
		_label.setAttribute('for','shoe'+(i+1));
		_label.setAttribute('style','background:url(x'+(i+1)+'.jpg)')
		radios[i].parentNode.appendChild(_label);
	}
var labels=document.getElementsByTagName('label');
	for(var i=0;i<labels.length;i++){
		labels[i].onclick=function(){
			for(var i=0;i<labels.length;i++){
			var find=labels[i].parentNode.getElementsByTagName('i')[0];
			if(find)
				{labels[i].parentNode.removeChild(find);}
			}
			var newI=document.createElement('i');
			var txt=document.createTextNode('选中');
			newI.appendChild(txt);
			this.parentNode.appendChild(newI);
		}
	}

CSS部分

i{display:block;border:4px solid red;width:72px;height:72px;position:absolute;left:0;top:0;text-indent:-9999em;}
.out{width:80px;height:80px;position:relative;float:left;padding-right:5px;}
label{display:block;width:80px;height:80px;background:red;position:absolute;left:0;top:0;}

今天去淘宝里看了一下，他们的实现方法不是表单的，自定义列表方式,demo里也写了，基本思路是一样的，区别是a标签设置成块级元素后设置背景图片，而radio按钮无法直接用css设置背景图片，所以只能加个标签来实现了,方法肯定是a标签好嘎，但是貌似题目要求是要单选框，难道我理解错了- -！还有关键是优雅降级问题没有搞明白是什么意思。。求指导。。。

淘宝UED前端开发的一道题目