InnerHTML 未按预期呈现答案

【问题标题】：InnerHTML not rendering as expectedInnerHTML 未按预期呈现
【发布时间】：2020-11-11 09:21:24
【问题描述】：

我目前正在进行 Ajax 调用，它返回投资组合中不同项目的数组。调用成功后，我想遍历数组并创建一个引导轮播，将每个项目名称和详细信息显示为轮播项。

我遇到的问题是，当我尝试将 HTML 代码添加到 #project-carousel 和 #project-carousel-indicators 时，没有任何显示。

<div class="row" id="project-section">
  <div class="col-lg-12">
    <div class="carousel slide" data-ride="carousel" id="project-carousel">
      <ol class="carousel-indicators" id="project-carousel-indicators">
        <!-- loop -->
      </ol>
      <div class="carousel-inner" id="inner-project-carousel">
        <!-- loop -->
      </div>
    </div>
  </div>
</div>

document.addEventListener('DOMContentLoaded', getProjects(), false);

function getProjects() {
  $.ajax({
    url: '/Portfolio/getProjects',
    type: 'POST',
    async: false,
    success: function(result) {
      var innerCarousel = document.getElementById('inner-project-carousel');
      var carouselIndicators = document.getElementById('project-carousel-indicators');

      for (var i = 0; i < result.length; i++) {
        if (i === 0) {
          //This is being hit but it doesn't render the innerHTML
          carouselIndicators.innerHTML = `<li data-target="#project-carousel" data-slide-to="${i}" class="active"></li>`;
          innerCarousel.innerHTML =
            `<div class="item active">
                <div class="row item-wrapper">
                    <div class="col-lg-5">
                        <h3>${result[i].Client}</h3>
                        <p>${ result[i].Description}</p>
                    </div>
                </div>
            </div>`;
        } else {
          //this is also being hit but it doesn't render the innerHTML
          carouselIndicators.innerHTML = `<li data-target="#project-carousel" data-slide-to="${i}"></li>`;
          innerCarousel.innerHTML =
            `<div class="item">
                <div class="row item-wrapper">
                    <div class="col-lg-5">
                        <h3>${result[i].Client}</h3>
                        <p>${ result[i].Description}</p>
                    </div>
                </div>
            </div>`;
        }
      }
    },
    error: function(event, jqxhr, settings, excpetion) {
      showError(event, jqxhr, settings, excpetion);
    }
  });
}

【问题讨论】：

你不断覆盖两个元素的.innerHTML，所以我假设代码只显示最后一个项目。你也有type: 'POST'，你确定这就是后端所期望的吗？无论如何，要追加，你应该使用$(carouselIndicators).append("html here");
另外，删除async: false。这是非常糟糕的做法，无论如何在您的代码中都没有必要
实际上，您正在覆盖.innerHTML，而不是一一追加项目。然后，each item should be wrapped 通过carousel-item，您要显示的项目应与active 类一起交付。然后，您的轮播控件将通过点击 previous 或 next 来控制项目处于活动状态
不错，试试这个！
感谢@ChrisG，这成功了！

标签： javascript html jquery twitter-bootstrap

【解决方案1】：

追加 html 内容后手动调用 carousel。

$('.inner-project-carousel').carousel();

【讨论】：