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

});

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

希望你能帮助我＆＃34;转换＆＃34;此

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

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

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

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

});

将短jquery转换为独立的javascript

3 个答案: