我有这个简单的jQuery片段(使用jQuery非常简单),我想将其转换为javascript,这似乎很难。
例如,我不知道如何处理.each - function。
希望你能帮忙,给我一个提示或快速解决问题。
$("#rTab div[id^=tab]").each(function(){
if( !$.trim( $(this).html() ).length ) {
id = $(this).attr("id");
//alert(id);
$("#rTab li[rel="+id+"]").hide();
}
});
$(".tabContent").hide();
$(".tabContent:first").show();
//click MUSS live
$("ul.tabs li").live('click',function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tabContent").hide();
//MUSS rel, weil href mit location.hash in product.php so nicht läuft
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
答案 0 :(得分:3)
对于$.each()
,您可以执行JavaScript FOR
循环。您需要了解遍历DOM。你有什么尝试?
最简单的方法是学习如何使用普通的DOM api进行DOM遍历和操作(你可能会称之为:普通的JavaScript)。
然而,这对某些事情来说可能是一种痛苦。 (这就是为什么像jQuery这样的库首先被发明的原因。)Google搜索“javascript DOM遍历/操作”应该会提供大量有用(而且帮助较少)的资源。
本网站上的文章非常好:http://www.htmlgoodies.com/primers/jsp/
请务必在所有浏览器中对此进行测试。
答案 1 :(得分:2)
你走了:
each("#rTab div[id^=tab]",
function(element){
if(element.innerHTML.trim().length > 0) {
id = element.getAttribute("id");
//alert(id);
each("#rTab li[rel="+id+"]",
function(element){
element.style.display = 'none';
}
);
}
}
)
each("#rTab li[rel="+id+"]",
function(element){
element.style.display = 'none';
)
);
each(".tabContent:first",
function(element){
element.style.display = 'block';
)
);
each("ul.tabs li",
function(element){
element.addEventListener(
'click',
function(e) {
e = e || window.event;
each("ul.tabs li",
function(e){
e.setAttribute('class' e.getAttribute('class').replace("active",''));
}
e.target.setAttribute('class' e.getAttribute('class') + "active");
each(".tabContent",
function(element){
element.style.display = 'none';
)
);
var activeTab = e.target.getAttribute("rel");
//$("#"+activeTab).fadeIn();
// I'm not going to write a loop to fade in a element.
}
);
}
);
function each(selector, func){
var e = document.querySelectorAll(selector);
if(e.forEach){
e.forEach(func);
}else{
for(var i = 0, l = e.length; i < l; i++){
func(e[i]);
}
}
}
这是更多的代码,是的。问题是所有这些jQuery选择器都可以返回多个元素,因此它是每个选择器的循环。因此别名使其略短。
至少这应该可以让你了解原生JS中的工作原理。请注意,querySelectorAll
isn't supported on older browsers和forEach
是IE 9 +。
此外,在.style.display = 'none';
和.style.display = 'block';
中,您可能希望以某种方式缓存旧显示值,因为并非所有元素都使用block
作为默认显示设置。
的替代方案