【问题标题】：Changing text with .each loop使用 .each 循环更改文本
【发布时间】：2017-07-26 17:58:58
【问题描述】：

问题

我正在尝试通过使用.each 从数组中获取数据来更改一系列<div> 上的文本。当我console.log时，我可以看到正确显示的数据。但是实际的按钮都显示Header 4和Subtitle 4

scripts.js

  $.each(steps, function(index) {
    $(".map__step--headline").html(steps[index].header);
    $(".map__step--subtitle").html(steps[index].subtitle);
    console.log(steps[index].header);
    console.log(steps[index].subtitle);
  });

steps.js

var steps = [
  {
    "header": "Header 1",
    "subtitle": "Subtitle 1"
  },
  {
    "header": "Header 2",
    "subtitle": "Subtitle 2"
  },
  {
    "header": "Header 3",
    "subtitle": "Subtitle 3"
  },
  {
    "header": "Header 4",
    "subtitle": "Subtitle 4"
  }
]

index.html

<div class="map__navigation">
            <div class="map__step is-selected" data-id="1">
                <p class="map__step--headline">tk-headline</p>
                <p class="map__step--subtitle">tk-subtitle</p>
            </div>

            <div class="map__step" data-id="2">
                <p class="map__step--headline">tk-headline</p>
                <p class="map__step--subtitle">tk-subtitle</p>
            </div>

            <div class="map__step" data-id="3">
                <p class="map__step--headline">tk-headline</p>
                <p class="map__step--subtitle">tk-subtitle</p>
            </div>

            <div class="map__step is-last" data-id="4">
                <p class="map__step--headline">tk-headline</p>
                <p class="map__step--subtitle">tk-subtitle</p>
            </div>
        </div>

【问题讨论】：

这是因为您每次迭代都将文本更改为所有按钮。在循环的第 1 步，所有按钮都有 Header 1，在第 2 个 Header 2，依此类推...
我不明白...你期待看到什么？
@KobyDouek 我希望看到Header 1、Subtitle 1 等等...对于每个按钮。

标签： javascript jquery loops foreach

【解决方案1】：

你可能想要这样的东西：

$('.map__step').each(function() {
  var $this = $(this);
  var index = $this.data('id') - 1;
  $('.map__step--headline', this).html(steps[index].header);
  $('.map__step--subtitle', this).html(steps[index].subtitle);
});

与其尝试直接使用数组来填充 html，不如让 html 确定它想要从数组中得到什么。

所以我们拉出一个我们感兴趣的元素列表并对其进行迭代，使用它们的data-id 属性来索引数组以获得他们想要的数据。

【讨论】：

每个回调函数的第一个值也为您提供索引
请在您的回答中添加一些解释。
@mr.void 这也可能是错误的索引。没有什么说 data-id 必须是连续的。

【解决方案2】：

由于html()可以接受一个函数，你可以根据迭代中每个<div>的索引计算出实际返回的字符串：

function getHeadline(i) {
    return steps[i].header;
}

function getSubtitle(i) {
    return steps[i].subtitle;
}

$('.map__step--headline').html(getHeadline);
$('.map__step--subtitle').html(getSubtitle);

见Fiddle

【讨论】：