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

Question

I've been trying to figure this out, seems easy but for some reason I just can't get it. So I have some HTML and Vanilla JS code, It loops through several words and types them out. then deletes them. I want each word to appear on the screen in a different color: Example, "dog" is red. "cat" is blue and "monkey" is yellow. I've tried using JSON.parse to pull out the elements but I'm feeling like I'm going in the wrong direction. Here's my code so far:

 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>

Thanks for the help!

Answer 1

See notes in snippet

 //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>