javascript - convert short jquery to standalone javascript

Question

Can you help me getting this:

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

I started with this:

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

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

});

That's what I have, but appending and mouseover...no idea.

Hope you can help me "converting" this.

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

Answer 2

仅供参考，像这样解决它：

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

});

Answer 3

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

前任：myElement+= "<p>A new paragraph</p>"