Question

所以我找不到为什么这不起作用的答案。一切似乎应该运行，但是当我点击按钮时，没有任何反应。请帮我解决这个问题。

ForEach-Object

这是javascript文件：

foreach

Answer 1

下一个工作脚本。因为let设置了变量块作用域，所以无法访问它。

function getArticleGenerator (articles) {
  let contentHolder = $('#content')

  return function () {
    if (articles.length > 0) {
      let article = $('<article>')
      article.append($(`<p>${articles.shift()}</p>`))
      contentHolder.append(article)
    }
  }
}

let articles = [
  'a',
  'b',
  'c',
  'd',
  'e'
]
var showNext = getArticleGenerator(articles)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>
<div><button onclick="showNext()">Show Next Article</button></div>

Answer 2

查看解决方案：D

＆＃13;

function getArticleGenerator (articles) {
  let contentHolder = $('#content')

  return function () {
    if (articles.length > 0) {
      let article = $('<article>')
      article.append($(`<p>${articles.shift()}</p>`))
      contentHolder.append(article)
    }
  }
}

let articles = [
  'a',
  'b',
  'c',
  'd',
  'e'
]
showNext = getArticleGenerator(articles)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="content"></div>
<div><button type="button" onclick="showNext()">Show Next Article</button></div>

＆＃13;

Answer 3

我解决了这个问题。但是我不明白它为什么会这样。首先我注意到当我在html内部使用我的函数时，我尝试将脚本向下移动到体内，然后它可以工作。但是我真的很想理解为什么会这样。特别是在某些其他人的计算机上，我的初始代码似乎有效。那么这里发生了什么？提前感谢向我解释这个谜团的人。这是我改变我的html的方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Next Article</title>
    <style>div{width:600px; text-align: center; font-size: 1.5em} article{border: 2px solid blue; padding: 2em; margin: 1em}</style>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
</head>
<body>
<div id="content"></div>
<script src="next-article.js"></script>
<div><button onclick="showNext()">Show Next Article</button></div>
</body>
</html>

HTML onclick没有触发我的功能，只是没有任何反应

3 个答案: