另一个新功能中的新功能

New function in another new function

本文关键字：新功能 另一个      更新时间：2023-09-26
问题

已解决： （http://jsfiddle.net/336e6pbh/15/） （解决方案）.

我有这个简单的js代码：jsfiddle（jsFiddle链接）。

Desktop();
GalleryButton();
function Desktop() {
    var wrapper = document.getElementById("wrapper");
    var footer = document.createElement("footer");
    var content = document.createElement("div");
    wrapper.appendChild(content);
    content.appendChild(footer);
    footer.id = "mainFooter";
    content.id = "content";
}
function GalleryButton() {
    var galleryImg = document.createElement("img");
    var galleryButton = document.createElement("a");
    galleryButton.setAttribute("href", "#");
    galleryImg.setAttribute("src", "pics/gallery.png");
    var bottom = document.getElementById("mainFooter");
    galleryButton.appendChild(galleryImg);
    bottom.appendChild(galleryButton);
    galleryButton.onclick = function () {
        new NewBox();
    };
}
function NewWindow() {
    var popup = document.createElement("div");
    var content = document.getElementById("content");
    popup.id = "popup";
    content.appendChild(popup);
}
function NewBox() {
    new NewWindow();
    var box = document.createElement("div");
    var content = document.getElementById("popup");
    box.id = "box";
    popup.appendChild(box);
}

当我单击左上角的 img 时，会出现一个新的弹出窗口，里面有一个黄色框。我的问题是如何在新弹出窗口中获得带有新黄色框的新弹出窗口？

我可以将代码从 NewWindow 放到 NewBox 函数，但我希望这些函数分开。

你对document.getElementById（"popup"）的第二次调用是找到第一个带有id=popup的div，并将黄色框放在那里。

您的元素 ID 应该是唯一的：HTML 规范

检查这个jsfiddle，我已经更改了您的代码和CSS

http://jsfiddle.net/336e6pbh/5/

function GalleryButton() {
var galleryImg = document.createElement("img");
var galleryButton = document.createElement("a");
galleryButton.setAttribute("href", "#");
galleryImg.setAttribute("src", "pics/gallery.png");
var bottom = document.getElementById("mainFooter");
galleryButton.appendChild(galleryImg);
bottom.appendChild(galleryButton);
galleryButton.onclick = function () {
    new newPopUp();
};
}
function newPopUp(){
var content = document.getElementById("content");
var popup = document.createElement("div");
popup.className = "popup";
var blueBox = document.createElement("div");
blueBox.className = "blueBox";
popup.appendChild(blueBox);
content.appendChild(popup);    
 }

你的CSS会是这样的

#content {
background-color: #ccc;
height:300px;
width:350px;
}
#mainFooter {
border:1px solid #000;
height:50px;
background-color: rgba(0, 0, 0, 0.4);
}
.popup {
background-color: blue;
border:1px solid pink;
height:100px;
width:150px;
}
.blueBox {
background-color: yellow;
height:20px;
width:40px;
}

您的 HTML 代码将保持原样。

相关文章：