Question

下面的代码应该用一个将其格式化为不同颜色的范围替换所有数组值。不幸的是，这只适用于第五个数组值，而不是任何其他值。我不确定错误在哪里。代码和小提琴如下：

＆＃13;

var names = ["JakeP97", "Trishy", "Puffs", "Evilgenious", "Joeyc", "TheKid"];
var namecolours = ["red", "pink", "yellow", "white", "green", "blue"];

var tribechat = document.getElementsByClassName('tribeconvo');
for (var i = 0; i < tribechat.length; i++) {
  colourallocate(names[i], namecolours[i]);
}

function colourallocate(chatname, chatcolour) {
  var s = tribechat[i].innerHTML;
  s = s.replace(chatname, '<span style="color:' + chatcolour + '">' + chatname + '</span>');
  tribechat[i].innerHTML = s;
}

＆＃13;

<div class="tribeconvo">Joeyc: hey everyone</div>
<div class="tribeconvo">JakeP97: hello joey</div>
<div class="tribeconvo">Joeyc: oi m8, whats up</div>
<div class="tribeconvo">TheKid: LOL hey JakeP</div>
<div class="tribeconvo">Joeyc: RIP</div>

＆＃13;

Answer 1

您的代码不起作用，因为您的名称顺序与您的html元素的顺序不匹配。您不能将名称用作键，因为数组也不是唯一的。我建议使用此溶剂，以便根据索引将名称与颜色配对。

＆＃13;

var names =       ["Joeyc", "JakeP97", "TheKid"];
var namecolours = ["green", "pink", "blue"];
	
		
	var tribechat = document.getElementsByClassName('tribeconvo');
	for(var i = 0; i < tribechat.length; i++)
	{
		colourallocate(tribechat[i]);
	}
	
	function colourallocate(tribechatParameter) {
    var currentName = tribechatParameter.childNodes[0].innerText; // Finds the span
    var propperIndex = names.indexOf(currentName);
		var s = tribechatParameter.innerHTML;
		s = s.replace(currentName, '<span style="color:' + namecolours[propperIndex] + '">' + currentName + '</span>');
		tribechatParameter.innerHTML = s;
	}

＆＃13;

<div class="tribeconvo"><span class="name">Joeyc</span>: hey everyone</div>
<div class="tribeconvo"><span class="name">JakeP97</span>: hello joey</div>
<div class="tribeconvo"><span class="name">Joeyc</span>: oi m8, whats up</div>
<div class="tribeconvo"><span class="name">TheKid</span>: LOL hey JakeP</div>
<div class="tribeconvo"><span class="name">Joeyc</span>: RIP</div>
<div class="tribeconvo"><span class="name">TheKid</span>: LOL hey JakeP</div>

＆＃13;

Answer 2

您未在每个DIV中执行所有颜色替换。您只需替换names[0]中的tribechat[0]，names[1]中的tribechat[1]。您需要遍历所有名称，尝试所有替换。

＆＃13;

var names = ["JakeP97", "Trishy", "Puffs", "Evilgenious", "Joeyc", "TheKid"];
var namecolours = ["red", "pink", "yellow", "white", "green", "blue"];

var tribechat = document.getElementsByClassName('tribeconvo');
for (var i = 0; i < tribechat.length; i++) {
  colourallocate(tribechat[i]);
}

function colourallocate(chat) {
  var s = chat.innerHTML;
  for (var j = 0; j < names.length; j++) {
    s = s.replace(names[j], '<span style="color:' + namecolours[j] + '">' + names[j] + '</span>');
    if (s != chat.innerHTML) {
      tribechat[i].innerHTML = s;
      return;
    }
  }
}

＆＃13;

<div class="tribeconvo">Joeyc: hey everyone</div>
<div class="tribeconvo">JakeP97: hello joey</div>
<div class="tribeconvo">Joeyc: oi m8, whats up</div>
<div class="tribeconvo">TheKid: LOL hey JakeP</div>
<div class="tribeconvo">Joeyc: RIP</div>

＆＃13;

Answer 3

您似乎在函数i中引用变量colourallocate，但i的范围超出colourallocate的范围：

function colourallocate(chatname, chatcolour) {
  var s = tribechat[i].innerHTML; // here `i` is not defined
  s = s.replace(chatname, '<span style="color:' + chatcolour + '">' + chatname + '</span>');
  tribechat[i].innerHTML = s; // again here `i` is not defined
}

你可能想做类似的事情：

for (var i = 0; i < tribechat.length; i++) {
  colourallocate(i)
}

function colourallocate(i) {
  var s = tribechat[i].innerHTML;
  var chatname = names[i];
  var chatcolour = namecolours[i];
  s = s.replace(chatname, '<span style="color:' + chatcolour + '">' + chatname + '</span>');
  tribechat[i].innerHTML = s;
}

虽然给出了2个函数的简单性，但你可以将它们组合起来：

for (var i = 0; i < tribechat.length; i++) {
  var s = tribechat[i].innerHTML;
  var chatname = names[i];
  var chatcolour = namecolours[i];
  s = s.replace(chatname, '<span style="color:' + chatcolour + '">' + chatname + '</span>');
  tribechat[i].innerHTML = s;
}

Answer 4

您甚至不需要单独的功能来执行更改。你可以在循环中做到这一点，如下所示：

var names = ["JakeP97", "Trishy", "Puffs", "Evilgenious", "Joeyc", "TheKid"];
var namecolours = ["red", "pink", "yellow", "white", "green", "blue"];

var tribechat = document.getElementsByClassName('tribeconvo');

for(var i=0; i<tribechat.length; i++) {
  arrs = tribechat[i].innerHTML.split(': ');
  tribechat[i].innerHTML = '';
  span1 = document.createElement('span');
  span1.innerHTML = arrs[0] + ': ';
  span1.setAttribute('style','color:' + namecolours[names.indexOf(arrs[0])]);
  span2 = document.createElement('span');
  span2.innerHTML = arrs[1];
  tribechat[i].appendChild(span1);
  tribechat[i].appendChild(span2);  
}

在第

行

span1.setAttribute('style','color:' + namecolours[names.indexOf(arrs[0])]);

在您为第一个style元素设置span属性的位置，您可以使用arrs[0]中的名称来获取namecolours中相应颜色的索引。

Fiddle here

Javascript替换不会影响所有数组元素

4 个答案: