Question

我正在处理一个脚本，该脚本读取文本文件并根据.txt文件的内容更改div中的文本。
但这不是我的问题。我不想只是纯文本，背景颜色应该根据if / elseif / else函数的条件而变化。

＆＃13;

var client = new XMLHttpRequest();	
client.open('GET', 'text.txt');

client.onreadystatechange = function checktxt() {


   if(client.responseText =='not') 
	{
	document.getElementById("response").innerHTML="Connect is working";
	var boxgreen = document.querySelector("#response");
	boxgreen.classList.add("green");
	} 
	else if (client.responseText =='younger') 
	{
	document.getElementById("response").innerHTML="Connect is working";
    var boxgreen = document.querySelector("#response");
	boxgreen.classList.add("green");
	} 
	else 
	{
	document.getElementById("response").innerHTML="Connect isn't working!";
	var boxred = document.querySelector("#response");
	boxred.classList.add("red");
	}
}

client.send();

＆＃13;

.green {
   width: 140px; 
   height: 140px; 
   background: #68B267;
   color: white;
}

.red {
   width: 140px; 
   height: 140px; 
   background: #ec4f3e;
   color: white;
}

＆＃13;

<div id="response"></div>

＆＃13;

我的第一次尝试是添加一个＆＃34; classList.add＆＃34;到if / else函数，但即使＆＃34; if＆＃34;条件满足它将班级改为＆＃34;红色＆＃34;因为它已经设定了。
我对javascript很新，没有使用ajax或jquery的经验，但也许这就是我正在寻找的。

Answer 1

如果代码已经运行，则需要删除已添加的类。 client.onreadystatechange = function checktxt（）{

使用您的代码，您只需致电

boxgreen.classList.remove("red");  //or green for the other case

并且它将起作用。

或者您可以使用切换和简化代码，这样您就不会一遍又一遍地使用相同的行。

client.onreadystatechange = function() {

  var isValid = client.responseText == 'not' || client.responseText == 'younger',
      text = isValid ? "Connect is working" : "Connect isn't working!",
      box = document.querySelector("#response");

  box.innerHTML = text;
  box.classList.toggle("green", isValid);
  box.classList.toggle("red", !isValid);

}

JavaScript - 在if / elseif条件满足时更改类

1 个答案: