更改 JSON 数组中每个元素的颜色答案

【问题标题】：Changing the color of each element in a JSON array更改 JSON 数组中每个元素的颜色
【发布时间】：2020-07-15 00:03:36
【问题描述】：

我一直在尝试解决这个问题，看起来很容易，但由于某种原因我无法理解！所以我有一些 HTML 和 Vanilla JS 代码。它遍历几个单词并输入它们，然后删除它们。我希望每个单词以不同的颜色出现在屏幕上。示例：“狗”是红色，“猫”是蓝色，“猴子”是黄色。我试过使用JSON.parse 来拉出元素，但我觉得我走错了方向。到目前为止，这是我的代码：

var TxtRotate = function(el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

TxtRotate.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

  this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

  var that = this;
  var delta = 300 - Math.random() * 100;

  if (this.isDeleting) { delta /= 2; }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }

  setTimeout(function() {
    that.tick();
  }, delta);
};

window.onload = function() {
  var elements = document.getElementsByClassName('txt-rotate');
  for (var i=0; i<elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-rotate');
    var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new TxtRotate(elements[i], JSON.parse(toRotate), period);
    }
  }

};

<h1 class="big-title">ANIMALS
     <span
       class="txt-rotate"
       data-period="2000"
       data-rotate='[ "dog", "cat", "monkey"]'>
     </span>
   </h1>

感谢您的帮助！

【问题讨论】：

嗨Kcandle。我正在研究这个，代码似乎在循环中输出和删除动物，所以，减去你想要的颜色，它似乎在解析动物名称方面起作用，所以我认为你只需要放在您的跨度数据属性中的颜色中，然后是一些处理颜色的代码（或者您想要这样做）。如果我误解了您的问题，请告诉我。

标签： javascript html arrays json

【解决方案1】：

查看sn-p中的注释

//new param
var TxtRotate = function(el, toRotate, period, color) {
  this.toRotate = toRotate;
  this.el = el;
  //new prop
  this.color = color;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

TxtRotate.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];
  //new var
  var color = this.color;
  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }
  //new style attribute
  this.el.innerHTML = `<span class="wrap" style="color:${color[i]}" >`+this.txt+'</span>';

  var that = this;
  var delta = 300 - Math.random() * 100;

  if (this.isDeleting) { delta /= 2; }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }

  setTimeout(function() {
    that.tick();
  }, delta);
};

window.onload = function() {
  var elements = document.getElementsByClassName('txt-rotate');
  for (var i=0; i<elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-rotate');
    var period = elements[i].getAttribute('data-period');
    //new var
    var color = elements[i].getAttribute('data-color'); 
    if (toRotate) {
      //new arg
      new TxtRotate(elements[i], JSON.parse(toRotate), period,JSON.parse(color));
    }
  }

};

<!-- new data attribute -->
<h1 class="big-title">ANIMALS
     <span
       class="txt-rotate"
       data-period="2000"
       data-rotate='[ "dog", "cat", "monkey"]'  
       data-color='["red","blue","yellow"]'>
     </span>
   </h1>

【讨论】：