使用.each循环更改文本

Question

问题

我试图通过使用<div>从数组中获取数据来更改一系列.each上的文本。当我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>

Answer 1

你可能想要这样的东西：

<script>
    $(window).load(function() {
        if ($('.yes').css('display') == 'none') {
            $('#button').css('display', 'block');
        }
    });

    $(document).scroll(function () {
        var y = $(this).scrollTop();

        if (y > 300) {
            $('#bottombadge, .bottomcta, .bottomandroid, .bottomapple').fadeIn();

            if (($('.yes').css('display') == 'none')) {
                /* (y > 300) AND (display IS "none") */
                $('#bottombutton').fadeIn();
            } else {
                /* (y > 300) AND (display ISN'T "none") */
                $('#bottombutton').fadeOut();
            }
        } else {
            /* (y <= 300) */
            $('#bottombutton, #bottombadge, .bottomcta, .bottomandroid, .bottomapple').fadeOut();
        }
    });
</script>

不要试图直接使用数组来填充html，而是让html从数组中确定它想要的内容。

因此，我们提取了我们感兴趣的元素列表并对它们进行迭代，使用它们的$('.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); }); 属性索引到数组中以获取所需的数据。

Answer 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