Question

上下文：我很懒，并且我试图动态/自动创建菜单按钮，这些菜单按钮使用原始JavaScript超链接到页面的标题。

我的网站从与document.onload位于同一文件夹中的外部文件加载正文内容，而我正在尝试设置菜单功能，然后应加载默认页面的菜单项。每当我从一页切换到另一页时，都需要手动加载菜单，因为我已经在loadContents（）末尾添加了loadMenues（thispage），但是加载页面后，由于加载正文内容，该菜单不起作用做。我不了解这种行为。

function setVisible(thisdiv){
    var alldivs = document.getElementsByClassName("container");
    [].forEach.call(alldivs, function(uniquediv){
        document.getElementById(uniquediv.id).style.display = "none";
        return;
    });
    document.getElementById(thisdiv).style.display = "block";
    window.scrollTo(0,0);
    loadMenues(thisdiv);
}
window.onload = function(){
    loadContent("personalinfo");
    loadContent("contactdetails");
    setVisible("personalinfo");
    loadMenues("personalinfo");
}

我正在解释这个次要问题，以便将我的主要问题具体化。

loadContents（file）是从请求的文件中提取内容的函数。这些文件的布局几乎相同，文件的每个部分都由custompadding div隔开，其中第一个子元素是h1元素，如下所示：

<html>
    <div class="custompadding">
        <h1 id="headerpersonaldetails">Personal details</h1>
        <p>Lorem ipsum</p>
    </div>
    <div class="custompadding">
        <h1 id="headercontactdetails">Contact details</h1>
        <p>Lorem ipsum</p>
    </div>
</html>

我正在尝试为每个标题设置一个菜单项，该菜单项滚动到单击的标题。手动设置每个菜单项都可以按预期工作，但是我想将其自动化，因此更改任何文件都会将菜单项自动添加到我们要更改的任何页面。以下是将这些元素添加到除数中的代码，但是在处理onclick函数时遇到问题。

function loadMenues(file) {
    var rightmenu = document.getElementById("right-menu");
    while(rightmenu.firstChild){
        rightmenu.removeChild(rightmenu.firstChild);
    }
    [].forEach.call(document.getElementById(file).children, function(custompaddingchild) {
    console.log(custompaddingchild);
    headerelement = custompaddingchild.getElementsByTagName("h1")[0]
    newbutton = document.createElement("div");
    newbutton.setAttribute("class", "menu-item");
    let movehere = function() { location.href="#"+headerelement.id; console.log(headerelement.id); }
    newbutton.onclick = movehere;
    /*rightmenu = document.getElementById("right-menu");*/
    buttonspanner = document.createElement("span");
    buttoncontent = document.createTextNode(headerelement.innerHTML);
    buttonspanner.appendChild(buttoncontent);
    newbutton.appendChild(buttonspanner);
    rightmenu.appendChild(newbutton);
    });
}

函数的第一部分删除菜单中已经存在的所有节点，以便在更改页面时添加新节点。

尝试使用onclick定义newbutton.setAttribute（）会导致Firefox中出现SyntaxError（当前不支持字段）。如果我也将静态字符串设置为newbutton.setAttribute("onclick", "location.href=#headerpersonalinfo");也不起作用。

尝试通过将newbutton.onclick设置为函数的方式来设置静态锚链接，如此行之有效

newbutton.onclick = function() {
    location.href = "#headerpersonalinfo";
}

这几乎就是我当前代码的设置方式，只是我给此函数提供了一个唯一变量，然后调用该变量。

我所遇到的问题是这样，正如我所看到的：每次找到新的标头时都会重新定义该变量，因此调用该函数会将用户发送到 last 标头，而不是预期的一。如何在定义onclick时设置要解析的函数，而当用户按下按钮时不调用该函数？

PS：我正在使用自己的文件，标题和项目的内部命名约定，以便尽可能地模块化我的网站。由于这是一个仅适用于我的简历的网站，所以我是唯一的开发者。

Answer 1

发生此问题是因为您正在将“变量”提升到全局范围（newbutton和headerelement）。

设置它们以阻止作用域变量（const或let），您将看到它起作用： https://codesandbox.io/s/rm4ko35vnm

function loadMenues(file) {
  var rightmenu = document.getElementById("right-menu");
  while (rightmenu.firstChild) {
    rightmenu.removeChild(rightmenu.firstChild);
  }
  [].forEach.call(document.getElementById(file).children, function(
    custompaddingchild
  ) {
    console.log(custompaddingchild);
    const headerelement = custompaddingchild.getElementsByTagName("h1")[0];
    console.log(headerelement.innerHTML);
    const newbutton = document.createElement("div");
    newbutton.setAttribute("class", "menu-item");
    console.log(headerelement.id);
    let movehere = function() {
      location.href = "#" + headerelement.id;
      console.log(headerelement.id);
    };
    newbutton.addEventListener('click', movehere);
    const rightmenu = document.getElementById("right-menu");
    const buttonspanner = document.createElement("span");
    buttoncontent = document.createTextNode(headerelement.innerHTML);
    buttonspanner.appendChild(buttoncontent);
    newbutton.appendChild(buttonspanner);
    rightmenu.appendChild(newbutton);
  });
}

使用动态onclick函数动态创建div

1 个答案: