如何使用 vanilla JS 的部分中的 HTML 元素动态更新模态窗口的内容？答案

【问题标题】：How to dynamically update a modal window's contents with HTML elements from sections using vanilla JS?如何使用 vanilla JS 的部分中的 HTML 元素动态更新模态窗口的内容？
【发布时间】：2018-04-22 22:14:00
【问题描述】：

我正在开发一个时间线类型的应用程序/页面，并希望在单击“阅读更多”时打开一个模式窗口，其中包含每个时间线块的内容。然而，我似乎在迭代阶段迷失了，因为每当我点击“阅读更多”时，只有最后一节的标题显示在模态标题中。这意味着循环完成迭代并用最后一个元素填充模态标题。任何见解将不胜感激！

**将完整程序编辑成更易于理解的格式（希望如此）**

//select modal interaction 
var readBtn = document.getElementsByClassName("cd-read-more");
var closeBtn = document.querySelector(".closeBtn");
var modal = document.querySelector(".modal");
var modalTitle = document.getElementById("modal-title");
var modalBody = document.querySelector(".modal-body");
var contentBlock = document.getElementsByClassName("cd-timeline-block")
var timeline = [];

//select cd-timeline-content 
timeline.postTitles = document.getElementsByClassName("post-title");
timeline.postBody = document.getElementsByClassName("post-body");
timeline.postImg = document.getElementsByClassName("pic");

//modal event functions
function openModal(indexNumber) {
  for (var i = 0; i < readBtn.length; i++) {
    modalTitle.innerHTML = timeline.postTitles[i].innerHTML;
  }
  modal.style.display = "block";
};


//event listeners for selections
//loop thru collection of readBtn array and call openModal to each
for (var i = 0; i < readBtn.length; i++) {
  readBtn[i].addEventListener("click", openModal);
};

<!doctype html>
<title>Example Timeline</title>
</head>

<body>
  <header>
    <h1>Example Timeline</h1>
  </header>

  <section id="cd-timeline" class="cd-container">
    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-location">
        <img src="img/cd-icon-location.svg" alt="Picture">
      </div>
      <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <div class="post-title">
          <h2>First Title</h2>
        </div>
        <div class="post-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.</p>
        </div>
        <a href="#0" class="cd-read-more">Read more</a>
        <span class="cd-date">July 17 2017</span>
      </div>
      <!-- cd-timeline-content -->
    </div>
    <!-- cd-timeline-block -->

    <div id="simpleModal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <h2 id="modal-title"><span class="closeBtn">&times;</span></h2>
        </div>
        <div class="modal-body">
          <div id="map"></div>
        </div>
        <div class="modal-footer">
          <h4>Test Footer</h4>
        </div>
      </div>
    </div>
    <!-- END MODAL -->

【问题讨论】：

来自stackoverflow.com/help/how-to-ask ... 不要只复制整个程序！
^ 尽管我同意这里有很多代码，而且minimal, complete, and verifiable example 确实会有所帮助...我确实必须赞扬您清楚地展示了您的问题，提及您的限制并在您的第一篇文章中添加堆栈片段。我还建议您查看tour of the site :)
问题是您实际上并没有将index 传递给openModal 中的readBtn[i].addEventListener("click", openModal) 函数。您正在寻找添加一个 closure :)
@ObsidianAge 我的评论可能有点粗鲁。我向 OP 道歉。
没有冒犯。谢谢！根据黑曜石时代，我将不得不做更多的研究。

标签： javascript html css for-loop iteration

【解决方案1】：

感谢大家的意见和线索。出于沮丧，我最终使用 jQuery 而不是 vanilla JS。我将把它转换（我正确使用它吗？）作为强化练习，但我现在只想要这个功能。

作为参考，这是我最后得到的代码：

$(document).ready(function(){
	//set click function on read more button
	$(".cd-timeline-block").on("click", function(){
		//selects modal title and empties of content
		$(".modal-title").empty();
		// //select modal body and empties it
		$(".modal-body").empty();
		//set variable title as click selector
		var title = $(".post-title", this);
		//set variable body content as click selections body
		var body = $(".post-body", this);
		$(title).clone().appendTo(".modal-title");
		$(body).clone().appendTo(".modal-body");
	})
});

【讨论】：