0

我不需要用 jQuery 写这个，但我对普通的 javascript 不够精通，无法弄清楚。Chris Coyier为我在这里谈论的内容写了一个很好的解释。

我想要转换它的原因是因为我不需要为这段代码包含整个 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;
    });
});

据我所知，其中不正确的一件事是querySelectorAll，它正在寻找一个 div 元素，对吗？另一件事是$(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.querySelectorAllnot element.querySelectorAll。

于 2012-05-22T06:18:01.760 回答