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

Question

我使用文本旋转器在文本之间进行转换。有三个<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>

​

Answer 1

您可以使用javascript三元运算符来完成此操作。

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

Answer 2

<script type="text/javascript">
var imgObj = {
  "slideData": [{
      "headings": ['DISCOVER', 'THIS']
    },
    {
      "headings": ['EXPERIENCE', 'NEW GROUNDS']
    },
    {
      "headings": ['THREE', 'WORD', 'LINE']
    }
  ]
};
$(function() {
  imgObj.slideData.forEach(function(data, idx) {
  var abcd="";
  for(i=0;i< data.headings.length ;i++){
  var seperator = ',';
  if(i < data.headings.length - 1)
  {
  abcd += data.headings[i] + " ";
  }
  else
  {
  abcd += data.headings[i] + seperator;
  }

  }

   $('.slideTitle .heading-1').append(abcd);
  });

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

    }
  });
});
</script>


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

U可以使用上面的代码n，而不是使用3跨标签作为一个可以附加的跨标记。希望这能帮你..。