javascript - 将简短的 jquery 转换为独立的 javascript

Question

你能帮我得到这个吗:

$(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) {
    //??? 
    };

});

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

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

Answer 1

好吧，唷，这有点接近了。你能试试这个吗？

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);
            }
         }
    }
}