如何用JavaScript根据对象数组切换模态弹窗的通知内容

需求与问题 #

现有通知数组：

let loginMessages = [{ 
  NotificationID: 123, 
  NotificationName: "first Message", 
  NotificationDesc: "First Message", 
  ValidFrom: "2019-09-25T00:00:00", 
  ValidTo: "2019-10-03T00:00:00" 
},
{ 
  NotificationID: 456, 
  NotificationName: "second Message", 
  NotificationDesc: "Second Message", 
  ValidFrom: "2019-09-25T00:00:00", 
  ValidTo: "2019-10-03T00:00:00" 
}];

要求页面加载时显示第一条通知的弹窗，点击Next按钮切换到下一条，到最后一条时显示Previous按钮。但当前代码把两条通知内容都叠加在同一个弹窗里，无法实现切换。

当前实现代码：

loginMessages.forEach((d) => {
  let listMessag = document.getElementById("modal-content");
  let listTitle = document.getElementById("modal-title");
  $('#infoPopup2').modal('show');
  let el = d.NotificationDesc;
  let ele = d.NotificationName;
  listMessag.innerHTML += el;
  listTitle.innerHTML += ele;
});

<div class="modal fade settings-modal" id="infoPopup2" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
  <div class="modal-content sp_modal_content auto-height" >
    <div class="modal-header sp_modal_header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">
          <img class="sp_modal_close_img" src="/images/button_close_small.png">
        </span>
      </button>
      <h4 class="modal-title sp_modal_heading" id="modal-title"> </h4>
    </div>
    <div class="modal-body text-editor-p" id="modal-content">

      </div>
      <div class="modal-footer">

        <div class="row">
          <div class="col-sm-12">

            <p class="pull-left">
              <input type='checkbox' store="checkbox3" /> Don't show again
              @*<input type='checkbox' store="checkbox2" />*@


            </p>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-12">

            <button type="button" id="next" class="sp_button sp_login_button pull-left">NEXT</button>
            <p class="pull-right">2/3</p>
          </div>
        </div>
      </div>
    </div>
  <!-- modal-content -->
</div>

解决方法 #

第一步：修改HTML结构 #

• 添加Previous按钮，默认隐藏
• 给页码显示元素加id，方便动态更新
  修改后的HTML：

<div class="modal fade settings-modal" id="infoPopup2" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
  <div class="modal-content sp_modal_content auto-height" >
    <div class="modal-header sp_modal_header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">
          <img class="sp_modal_close_img" src="/images/button_close_small.png">
        </span>
      </button>
      <h4 class="modal-title sp_modal_heading" id="modal-title"> </h4>
    </div>
    <div class="modal-body text-editor-p" id="modal-content">
    </div>
    <div class="modal-footer">
      <div class="row">
        <div class="col-sm-12">
          <p class="pull-left">
            <input type='checkbox' store="checkbox3" /> Don't show again
            @*<input type='checkbox' store="checkbox2" />*@
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <!-- 新增Previous按钮，默认隐藏 -->
          <button type="button" id="previous" class="sp_button sp_login_button pull-left" style="display:none;">PREVIOUS</button>
          <button type="button" id="next" class="sp_button sp_login_button pull-left">NEXT</button>
          <!-- 给页码加id -->
          <p class="pull-right" id="page-indicator">1/2</p>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

第二步：重写JavaScript逻辑 #

去掉forEach循环，改用索引控制当前显示的通知，写一个渲染函数来更新弹窗内容，绑定按钮点击事件切换索引：

// 当前显示的通知索引，初始为0（第一条）
let currentIndex = 0;
const modalTitle = document.getElementById("modal-title");
const modalContent = document.getElementById("modal-content");
const nextBtn = document.getElementById("next");
const prevBtn = document.getElementById("previous");
const pageIndicator = document.getElementById("page-indicator");

// 渲染当前索引对应的通知
function renderNotification() {
  const currentMsg = loginMessages[currentIndex];
  // 替换内容，不是追加
  modalTitle.textContent = currentMsg.NotificationName;
  modalContent.textContent = currentMsg.NotificationDesc;
  // 更新页码
  pageIndicator.textContent = `${currentIndex + 1}/${loginMessages.length}`;
  
  // 控制按钮显示/隐藏
  prevBtn.style.display = currentIndex === 0 ? "none" : "inline-block";
  nextBtn.style.display = currentIndex === loginMessages.length - 1 ? "none" : "inline-block";
}

// 页面加载时显示第一条通知
$(document).ready(function() {
  renderNotification();
  $('#infoPopup2').modal('show');
  
  // Next按钮点击事件
  nextBtn.addEventListener('click', function() {
    if (currentIndex < loginMessages.length - 1) {
      currentIndex++;
      renderNotification();
    }
  });
  
  // Previous按钮点击事件
  prevBtn.addEventListener('click', function() {
    if (currentIndex > 0) {
      currentIndex--;
      renderNotification();
    }
  });
});

关键修改点 #

1. 用currentIndex追踪当前显示的通知，不再用forEach循环追加内容
2. 渲染时使用textContent替换内容，而不是innerHTML +=避免叠加
3. 根据当前索引动态控制Previous和Next按钮的显示状态
4. 更新页码为当前实际的通知数量

内容的提问来源于stack exchange，提问作者user18513197