0

私はこれをjQueryで書く必要はありませんが、それを理解するのに十分なプレーンなJavaScriptに精通していません。クリス・コイエは、私がここで話していることについての素晴らしい説明を書きました。

変換したい理由は、この1つのコードにjQueryライブラリ全体を含める必要がないためです。プレーンな古いJavaScriptを使用して、その余分なリクエストを保存できます。

これは私が変換したいサンプルコードです：

$(document).ready(function() {
    $(".featured").click(function(){
        window.location=$(this).find("a").attr("href"); return false;
    });
});

これが私がこれまでに思いついたものです：

document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll("div.feature").click(function(){
        window.location=$(this).find("a").setAttribute("href"); 
        return false;
    });
});

私の知る限り、これで正しくないことの1つはquerySelectorAll、div要素だけを探しているですよね？もう1つは、$(this)プレーンなJavaScriptに変換する方法がわからないです。

4

2 に答える 2

4

仮定...

  • あなたはブラウザのサポートを知ってquerySelectorAllいますが、それでもあなたはそれを使用しています
  • addEventListenerこれは、標準に準拠したブラウザでのみ機能します

私はあなたが意味したと信じています：

//get all a's inside divs that have class "featured"
var feat = document.querySelectorAll("div.featured a"),
    featlen = feat.length,
    i;

//loop through each
for(i=0;i<featlen;++i){
    //add listeners to each
    feat[i].addEventListener('click',function(){
        window.location = this.href;
    },false);
}

または、で<div>ラップすることもできます<a>。JSは必要ありません。これは完全に有効なHTMLであり、インライン要素にブロック要素を含めるべきではないという規則にもかかわらず、ブラウザは意図したとおりに機能します。サイズを調整するだけでなく、必ずdisplay:blockオンにしてください。<a>

<a href="location">
    <div> content </div>
</a>
于 2012-05-22T06:08:32.497 に答える
2

this.querySelectorAll（...）で選択できます：

IE8：

window.onload = function() {
    // get all dom elements with class "feature"
    var aFeatures = document.querySelectorAll(".feature");
    // for each selected element
    for (var i = 0; i < aFeatures.length; i++) {
        // add click handler
        aFeatures[i].onclick = function() {
            // get href of first anchor in element and change location
            window.location = this.querySelectorAll("a")[0].href;
            return false;
        };
    }
};

IE9およびその他の現在のブラウザー：

document.addEventListener("DOMContentLoaded", function() {
    // get all dom elements with class "feature"
    var aFeatures = document.querySelectorAll(".feature");
    // for each selected element
    for (var i = 0; i < aFeatures.length; i++) {
        // add click handler
        aFeatures[i].addEventListener('click', function() {
            // get href of first anchor in element and change location
            window.location = this.querySelectorAll("a")[0].href;
            return false;
        });
    }
});

===更新===

IE7をサポートするには、前に次の（テストされていない）スクリプトを追加する必要があります（こちらも参照）。

(function(d){d=document,a=d.styleSheets[0]||d.createStyleSheet();d.querySelectorAll=function(e){a.addRule(e,'f:b');for(var l=d.all,b=0,c=[],f=l.length;b<f;b++)l[b].currentStyle.f&&c.push(l[b]);a.removeRule(0);return c}})()

document.querySelectorAllをサポートしていない可能性がありelement.querySelectorAllます。

于 2012-05-22T06:18:01.760 に答える