Question

我目前正在努力刺激一个论坛。到目前为止我所做的是当用户提出问题时

主题和问题将保存到对象中并推送到数组
在主页面上，将显示数组中的所有对象
我将能够点击每个显示的链接。

但是这里有棘手的部分。我如何使用相同的HTML并动态更改其中的代码。

我知道我调用了一个数组[0] .Question来改变INNERHTML代码的内容。但我不知道如何制作一个特定的数组[数字]出来。

例如。如果我有一个长度为0 - 4的数组！我想点击第一个链接时调用数组[0]。当我点击第二个链接时跟随数组[1]！我该怎么做！

我发现的另一个解决方案是使用URL哈希。但是为了使用URL哈希，如果我想让我的所有数组对象动态正确，我必须制作5个页面？

希望你们明白我的意思！

Answer 1

从我收集到的内容中，您有一系列问题，例如

var questions = [{
  title: 'Question 1',
  description: 'something about Question 1'
}, {
  title: 'Question 2',
  description: 'something about Question 2'
}]

并且您希望能够显示每个问题的描述，而无需实际导航到新页面。这可以使用普通的javascript（使用jQuery清理）。

以下是您可以构建的一般普通js方法：

var questions = [{
  title: 'Question 1',
  description: 'something about Question 1'
}, {
  title: 'Question 2',
  description: 'something about Question 2'
}]

var questionContainer = document.getElementById('questions');
var descriptionContainer = document.getElementById('description');
var contentContainer = document.getElementById('content');
var backBtn = document.getElementById('back-btn');

questions.forEach(function(question) {
  var q = document.createElement('div');
  q.innerText = question.title;
  q.className = 'question';
  q.addEventListener('click', function() {
    contentContainer.innerText = question.description;
    descriptionContainer.style.display = 'block';
    questionContainer.style.display = 'none';
  })
  questionContainer.appendChild(q);
})

backBtn.addEventListener('click', function() {
  descriptionContainer.style.display = 'none';
  questionContainer.style.display = 'block';
})

.question:hover,
#back-btn:hover {
  color: blue;
  cursor: pointer;
}

<div id="questions"></div>

<div id="description" style="display: none;">
  <div id="back-btn">Back</div>
  <div id="content"></div>
</div>

请注意这适合玩游戏或个人项目。但是，最终结果仍然是“静态的”，因为您在前端存储了一组静态问题。如果您希望这是真正的动态，您必须将问题和所有相关细节存储在某种数据库中。

我如何从我的LocalStorage中调出一些东西并使事物变得动态

1 个答案: