Text change when background colour changes using J

2019-10-05 13:03发布

问题:

Below is my Javascript for changing the background colour of a website, however is there a way to change text in the body of the page when this change in colour occurs?

function changeColor(element, curNumber){
curNumber++;

if(curNumber > 4){
    curNumber = 1;
}
console.log(curNumber);
element.addClass('color' + curNumber, 500);
// So previous classes get removed.
element.attr('class', 'color' + curNumber);
setTimeout(function(){changeColor(element, curNumber)}, 1000);  
}
changeColor($('#testElement'), 0);

回答1:

Simply have the text in an array, ( get it from some elements using jquery - however you want it) iterate through it and change the content inside the div using html() function when you are changing the color.

Simple modification of your code would be something like

function changeColorAndText(element, curNumber){
 curNumber++;
 if(curNumber > 4){
    curNumber = 1;
 }
 element.addClass('color' + curNumber, 500);
 element.html(arr[curNumber]);
 element.attr('class', 'color' + curNumber);
 setTimeout(function(){changeColorAndText(element, curNumber)}, 1000);  
}
var arr = ['hi','hello ','how ','are ','you '];
changeColorAndText($('#testElement '), 0);

JSFiddle