通过链接动态创建img，而不附加多个实例

Dynamic img creation through a link without attaching multiple instances

本文关键字：实例 链接 动态 创建 img      更新时间：2023-09-26

我有一个链接，附带有"onclick"功能。当按下时，它将一个img元素附加到名为"mediaBox"的单独div中。我遇到的问题是，如果按多次它就会附加更多的img实例。我怎么能控制呢?我仍然是JavaScript的新手，我更喜欢在纯JavaScript而不是jQuery中收到这个答案，因为我将在我完全理解JavaScript之后跨过那座桥。

var rkf = document.getElementById("submenulinks").getElementsByTagName("li")[0];
rkf.onclick = function(){
    var client = document.getElementById('client');
    var description2 = document.getElementById('description2');
    var role = document.getElementById('role');
    var mediaBox = document.getElementById('mediaBox'); 
    var thumb = document.getElementById("thumb");       
    var client2 = document.getElementById("client2");
    var newImage = document.createElement("img");
    client2.innerHTML = "Role - Applications";
    client.innerHTML = "RKF Real Estate";
    client2.innerHTML = "Role - Applications";
    description2.innerHTML = "Quarterly Catalog of Exclusive Listings managed by RKF";
    role.innerHTML = "Custom designed Cover and listings content. Tables were also utilized within Indesign. <br><br><b><i> Photoshop and Indesign</i></b>";
    newImage.setAttribute("src", "../images/rkf_cover.jpg");
    newImage.setAttribute("height", "500px");
    newImage.setAttribute("width", "387px");
    newImage.setAttribute("alt", "rkf");
    newImage.setAttribute("href", "#");
    mediaBox.style.backgroundImage = "none";
    document.getElementById("mediaBox").appendChild(newImage);
    newImage.style.display = "block";
    newImage.style.marginLeft = "auto";
    newImage.style.marginRight = "auto";
    newImage.style.marginTop = "25px";  
}           

rkf.onclick = function(){
    var client = document.getElementById('client');
    ...
    ...
    ...
    // Remove the handler after it ran once.
    this.onclick = null; // <<<<<========================
}

因为您将来确实想使用jQuery，所以它等于:

$('#submenulinks li:first').one('click', handler);
相关文章：