时间戳

首页 > 解决方案 > 使用 forEach 语句从数组索引附加字符串显示未定义 - 文本旋转器

javascript - 使用 forEach 语句从数组索引附加字符串显示未定义 - 文本旋转器

问题描述

我正在使用文本旋转器在文本之间进行转换。有三个<span>标签从数组“ headings”中附加字符串。我设法附加它们，但如果数组中只有两个索引，它显示未定义。

我理解为什么会发生这种情况（因为我要附加第三个索引），但我不知道如何解决这个问题。我会设置一个条件语句来检查第三个索引是否不存在，然后不要附加这个或简单地append('')- 一个空字符串

代码如下：

var imgObj = {
  "slideData": [{
      "headings": ['DISCOVER', 'THIS']
    },
    {
      "headings": ['EXPERIENCE', 'NEW GROUNDS']
    },
    {
      "headings": ['THREE', 'WORD', 'LINE']
    }
  ]
};

$(function() {
  imgObj.slideData.forEach(function(data, idx) {
    var first = data.headings[0];
    var second = data.headings[1];
    var third = data.headings[2];
    var seperator = ',';
    $('.slideTitle .heading-1').append(first + seperator);
    $('.slideTitle .heading-2').append(second + seperator);
    $('.slideTitle .heading-3').append(third + seperator);
  });

  $(".slideTitle span").Morphext({
    animation: "zoomInLeft",
    separator: ",",
    speed: 4000,
    complete: function() {

    }
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/Morphext/2.4.4/morphext.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Morphext/2.4.4/morphext.min.js"></script>

<h2 class="slideTitle">
  <span class="heading-1"></span>
  <span class="heading-2"></span>
  <span class="heading-3"></span>
</h2>

标签： javascriptjqueryarrays

解决方案

你可以用javascript三元运算符来做

 var third =(data.headings[2])==undefined?"":data.headings[2];

推荐阅读