Question

Jquery的问题

请问这段代码怎样用javascriptDOM写出一样的？他的作用是淘宝中的输入价格区间然后显示符合条件的商品$(function(){ $("input.sortBarPrice").keyup(function(){ var num= $(this).val(); if(num.length==0){ $("div.productUnit").show(); return; } num = parseInt(num); if(isNaN(num)) num= 1; if(num<=0) num = 1; $(this).val(num); var begin = $("input.beginPrice").val(); var end = $("input.endPrice").val(); if(!isNaN(begin) && !isNaN(end)){ $("div.productUnit").hide(); $("div.productUnit").each(function(){ var price = $(this).attr("price"); price = new Number(price); if(price<=end && price>=begin) $(this).show(); }); } });});

Answer 1

window.onload = function(){
	//拜托以id来控制元素好吗？全程用标签加类名来查找元素效率低，代码复杂！！
	function get(tagName, className){
		var elements = document.getElementsByTagName(tagName),
			result = [];
		for(var i = 0; i < elements.length; i++){
			if(elements[i].className == className){
				result.push(elements[i]);
			}
		}
		return result;
	}
	var sortBarPrices = get('input', 'sortBarPrice');
	for(var i in sortBarPrices){
		sortBarPrices[i].onkeyup = function(e){  //建议监听onchange内容变动事件（内容改变后才执行），而不是onkeyup按键弹起事件（每按一次按键执行一次）
			var productUnits = get('div', 'productUnit'),
				num = this.value;
			if(num.length){  //此处代替非 等于0的判断，非0即真
				num = parseInt(num);
				this.value = (isNaN(num) || num <= 0) ? 1 : num;
				var begin = parseInt(get('input', 'beginPrice')[0].value),  //直接从这类标签中获取值，我的天哪，我完全不知道你想要获取那个
					end = parseInt(get('input', 'endPrice')[0].value);		//是取第一个，还是取平均值？这里我取第一个了
					if(isNaN(begin) && isNaN(end)){  //这里你确定是逻辑与，而不是逻辑或？
						for(var i in productUnits){
							var price = productUnits[i].price ? productUnits[i].price : productUnits[i].getAttribute('price');//没测试 兼容写法
							productUnits[i].style.display = 'none';
							price = parseInt(price); //price = new Number(price); 感觉没区别好吗？ 还有NaN的情况没处理？
							price = isNaN(price) ? 0 : price;
							if(price <= end && price >= begin){
								productUnits[i].style.display = 'inline-block';
							}
							
						}	
					}
			}else{
				for(var i in productUnits){
					productUnits[i].style.display = 'inline-block';
				}
			}
		}
	}
}

你这代码真nb，看的我全程懵逼，感觉还有很多bug和逻辑问题有的没写（没写的是要全部重新写，改这个已经没有意义了，服气），自己看注释