-2

我有这个简单的 jQuery 片段（使用 jQuery 非常简单），我想将它转换为 javascript，这似乎真的很难。

例如，我不知道如何处理 .each - 函数。

希望您能提供帮助，给我提示或快速解决问题。

 $("#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(); 
});
4

2 回答 2

3

对于$.each()，您可以执行 JavaScriptFOR循环。您需要了解遍历 DOM。你试过什么？

最简单的方法是学习如何使用普通的 DOM api 进行 DOM 遍历和操作（您可能会称之为：普通 JavaScript）。

然而，这对某些事情来说可能是一种痛苦。（这就是为什么首先发明像 jQuery 这样的库的原因）。

谷歌搜索“javascript DOM traversing/manipulation”应该会提供大量有用的（和不太有用的）资源。

这个网站的文章还不错：http ://www.htmlgoodies.com/primers/jsp/

请务必在所有浏览器中进行测试。

你可以在这里和这里阅读更多。

于 2013-01-24T10:35:52.853 回答
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 不支持forEachIE 9+。

此外，在.style.display = 'none';and.style.display = 'block';中，您可能希望以某种方式缓存旧的显示值，因为并非所有元素都block用作默认显示设置。

一个替代方案

于 2013-01-24T10:46:43.940 回答