将短 jquery 转换为独立的 javascript答案

【问题标题】：convert short jquery to standalone javascript将短 jquery 转换为独立的 javascript
【发布时间】：2013-06-29 19:16:57
【问题描述】：

你能帮我搞定这个吗：

$(document).ready(function() {
    $("#large").attr("src",bilder[0]);

    $.each(bilder, function(i) {
        $("#gallery .large").append("<div class='small'><table><tr><td><img src='"+bilder[i]+"' /></td></tr></table></div>");
    });

    $(".small td").mouseover(function(){
        var src = $("img",this).attr("src");
        $("#large").attr("src",src);
    });
});

我是从这个开始的：

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('large').setAttribute('src', bilder[0]);

    for (var i = 0, len = bilder.length; i < len; ++i) {
    //??? 
    };

});

这就是我所拥有的，但是追加和鼠标悬停......不知道。

希望你能帮我“转换”这个。

【问题讨论】：

//??? 这是 jQuery 派上用场的地方之一 :-)
是的。这是 jquery 完美的“硬”派对。但在这种情况下，我不能使用 jquery。只有普通的js。
如果您的目标是现代浏览器，您可以使用 document.querySelectorAll 进行选择
我知道。像这样var $ = function(el) { return document.querySelectorAll(el); };// Usage = $('.hello'); 但是必须兼容到 IE7，例如。

标签： javascript jquery function append converter

【解决方案1】：

您可以使用元素的属性innerHtml 设置其内容。要附加一些内容，您应该使用 +=

例如：myElement+= "<p>A new paragraph</p>"

【讨论】：

【解决方案2】：

好的，唷，这有点接近了。你可以试试这个吗？

for (var i = 0, len = bilder.length; i < len; ++i) {
    var els = document.getElementById("gallery").getElementsByClassName("large");
    for (var j = 0; j < els.length; ++j){
        els[i].innerHTML += "<div class='small'><table><tr><td><img src='"+bilder[i]+"' /></td></tr></table></div>";
    }
};

...

var smallEls = document.getElementsByClassName("small");
for( var i = 0 ; i < smallEls.length; ++i){
    var tds = smallEls[i].getElementsByTagName("td");
    for( var j = 0 ; i < tds.length; ++j){
        tds[j].onmouseover = function(){
            var imgs = document.getElementsByTagName("img");
            for( var k = 0 ; k < imgs.length; ++k){
                var src = imgs[k].src;
                document.getElementById("large").addAttribute("src", src);
            }
         }
    }
}

【讨论】：

几乎完美！我将els[i] 更改为els[j] 并且循环工作正常！鼠标悬停未触发。
for( var j = 0 ; i < tds.length; ++j){ 到 for( var j = 0 ; j < tds.length; ++j){ 和 .addAttribute 到 setAttribute 并且它（仅）在第一次鼠标悬停时工作。

【解决方案3】：

仅供参考，这样解决了：

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('large').setAttribute('src', bilder[0]);

    for (var i = 0, len = bilder.length; i < len; ++i) {
        var els = document.getElementById("gallery").getElementsByClassName("large");
        for (var j = 0; j < els.length; ++j){
            els[j].innerHTML += "<div class='small'><table><tr><td onmouseover='document.getElementById(\"large\").setAttribute(\"src\", \""+bilder[i]+"\");'><img src='"+bilder[i]+"' /></td></tr></table></div>";
        }
    };

});

【讨论】：