-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

の場合、JavaScriptループ$.each()を実行できます。FORDOM のトラバースについて学ぶ必要があります。何を試しましたか？

最も簡単な方法は、単純な DOM API を使用して DOM トラバースと操作を行う方法を学ぶことです (通常の JavaScript と呼びます)。

ただし、これは一部の場合は苦痛になる可能性があります。(これが、そもそも jQuery のようなライブラリが発明された理由です)。

「javascript DOM traversing/manipulation」をグーグルで検索すると、役に立つ (そしてあまり役に立たない) リソースがたくさん得られるはずです。

この Web サイトの記事は非常に優れています: 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 は古いブラウザではサポートされておらず、 forEachIE9以降であることに注意してください。

また、.style.display = 'none';およびでは、すべての要素がデフォルトの表示設定として.style.display = 'block';使用されるわけではないため、古い表示値を何らかの方法でキャッシュしたい場合があります。block

の代替

于 2013-01-24T10:46:43.940 に答える