堆栈内存溢出
  简体   繁体   English

将XML数据加载到JavaScript中，并使用XML数据更改div颜色

[英]Loading XML data into JavaScript and changing div colors with the XML data

 原文  2015-11-20 22:48:38  0   1    javascript/ html/ css/ xml

问题描述

This is homework question requiring that I use color information collected in a XML file to change the color of twenty divs with a button. 这是一项作业问题，要求我使用XML文件中收集的颜色信息来通过按钮更改20个div的颜色。 I have approached this by creating a single class of divs in the html document, loading the XML data into a Javascript file and iterating through the XML. 我通过在html文档中创建一个div类，将XML数据加载到Javascript文件中并遍历XML来解决这个问题。 I think the problem is that I am incorrectly loading the XML document into Javascript? 我认为问题是我将XML文档错误地加载到Javascript中？ I posted sections of the code as follows (I only posted one part of the css so it wouldn't be so long) 我按如下方式发布了部分代码（我只发布了一部分CSS，所以不会太长） 

<div class="div" id="two"><h2>2</h2></div>    
<div class="div" id="one"><h1>1<br><br> <br>REQUIREMENT #1</h1></div>
<div class="div" id="three"><h2>3</h2></div>
<div class="div" id="four"><h2>4</h2></div>
<div class="div" id="five"><h2>5</h2></div>
<div class="div" id="six"><h2>6</h2></div>
<div class="div" id="seven"><h2>7</h2></div>
<div class="div" id="eight"><h2>8</h2></div>
<div class="div" id="nine"><h2>9</h2></div>
<div class="div" id="ten"><h2>10</h2></div>
<div class="div" id="eleven"><h2>11</h2></div>
<div class="div" id="twelve"><h2>12</h2></div>
<div class="div" id="thirteen"><h2>13</h2></div>
<div class="div" id="fourteen"><h2>14</h2></div>
<div class="div" id="fifteen"><h2>15</h2></div>
<div class="div" id="sixteen"><h2>16</h2></div>
<div class="div" id="seventeen"><h2>17</h2></div>
<div class="div" id="eighteen"><h2>18</h2></div>
<div class="div" id="nineteen"><h2>19</h2></div>
<div class="div" id="twenty"><h2>20</h2></div>
</div>
<input type="button" value="changediv" onclick="changeColors()">


<?xml version="1.0" encoding="UTF-8"?>
<divcolors>
<div name ="one">
<color>aliceblue</color>
</div>
<div name ="two">
<color>aquamarine</color>
</div>
<div name="three">
<color>coral</color>
</div>
<div name="four">
<color>cornflowerblue</color>
</div>
<div name="five">
<color>cyan</color>
</div>
<div name="six">
<color>darkgray</color>
</div>
<div name="seven">
<color>darkolivegreen</color>
</div>
<div name="eight">
<color>darkviolet</color>
</div>
<div name="nine">
<color>deepskyblue</color>
</div>
<div name="ten">
<color>forestgreen</color>
</div>
<div name="eleven">
<color>honeydew</color>
</div>
<div name="twelve">
<color>lightsalmon</color>
</div>
<div name="thirteen">
<color>lightsteelblue</color>
</div>
<div name="fourteen">
<color>maroon</color>
</div>
<div name="fifteen">
<color>mediumspringgreen</color>
</div>
<div name="sixteen">
<color>mediumturquiose</color>
</div>
<div name="seventeen">
<color>mistyrose</color>
</div>
<div name="eighteen">
<color>oldlace</color>
</div>
<div name="nineteen">
<color>olive</color>
</div>
<div name="twenty">
<color>azure</color>
</div>
</divcolors>

an example of the css: CSS的示例： 

#one {
border-radius: 300px;
background: blue;
position: absolute;
float: left;
top: 550px;
width: 300px;
height: 300px;
margin-left:  500px;
margin-top: 5px;
z-index: 4;
transition-duration: 1s;
transition-timing-function: cubic-bezier (.5,-5,.3,1.3), ease;
transition-delay: .2s;

}

JavaScript: JavaScript： 

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
    changeColors(xhttp);
}
};
xhttp.open("GET", "divcolors.xml", true);
xhttp.send();

function changeColors(xml) {
var xmlDoc = xml.responseXML;
var colorCrap= "";
var colorColor = xmlDoc.getElementsByTagName("color");
var i;
var x = document.getElementsByClassName("div");
for (i=0; i<colorColor.length;i++){
    colorCrap += colorColor[i].childNodes[0].nodeValue;

}
x[i].style.backgroundColor = colorCrap;
}

1 个解决方案

解决方案1
 0 已采纳  2015-11-20 23:44:58

You're close, but no cigar. 你很近，但是没有雪茄。 You need to select the right element in the XML and get the value the proper way. 您需要在XML中选择正确的元素并以正确的方式获取值。 There are several ways to solve this problem, and here I just did it based on your method. 有几种方法可以解决此问题，在这里，我只是根据您的方法进行的。

I have made a working demo that you can be inspired from: 我做了一个工作演示，您可以从中得到启发： 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XML Color</title>
<script src="script.js"></script>
</head>
<body>
<div>
  <div class="div" id="one"><h1>1<br><br> <br>REQUIREMENT #1</h1></div>
  <div class="div" id="two"><h2>2</h2></div>    
  <div class="div" id="three"><h2>3</h2></div>
  <div class="div" id="four"><h2>4</h2></div>
  <div class="div" id="five"><h2>5</h2></div>
  <div class="div" id="six"><h2>6</h2></div>
  <div class="div" id="seven"><h2>7</h2></div>
  <div class="div" id="eight"><h2>8</h2></div>
  <div class="div" id="nine"><h2>9</h2></div>
  <div class="div" id="ten"><h2>10</h2></div>
  <div class="div" id="eleven"><h2>11</h2></div>
  <div class="div" id="twelve"><h2>12</h2></div>
  <div class="div" id="thirteen"><h2>13</h2></div>
  <div class="div" id="fourteen"><h2>14</h2></div>
  <div class="div" id="fifteen"><h2>15</h2></div>
  <div class="div" id="sixteen"><h2>16</h2></div>
  <div class="div" id="seventeen"><h2>17</h2></div>
  <div class="div" id="eighteen"><h2>18</h2></div>
  <div class="div" id="nineteen"><h2>19</h2></div>
  <div class="div" id="twenty"><h2>20</h2></div>
  </div>
  <input type="button" value="changediv" onclick="setTheColors()">
</body>
</html>

function changeColors(xml) {
var xmlDoc = xml.responseXML;
var colorColor = xmlDoc.getElementsByTagName("div");
for (var i = 0; i < colorColor.length; i++){
    var current = colorColor[i].getAttribute('name');
    var theDiv = document.getElementById(current);
    theDiv.style.backgroundColor = colorColor[i].childNodes[0].nextSibling.innerHTML;
}
}

function setTheColors(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        changeColors(xhttp);
    }
};
xhttp.open("GET", "divcolors.xml", true);
xhttp.send();
}

<?xml version="1.0" encoding="UTF-8"?>
<divcolors>
<div name ="one">
    <color>aliceblue</color>
</div>
<div name ="two">
    <color>aquamarine</color>
</div>
<div name="three">
    <color>coral</color>
</div>
<div name="four">
    <color>cornflowerblue</color>
</div>
<div name="five">
    <color>cyan</color>
</div>
<div name="six">
    <color>darkgray</color>
</div>
<div name="seven">
    <color>darkolivegreen</color>
</div>
<div name="eight">
    <color>darkviolet</color>
</div>
<div name="nine">
    <color>deepskyblue</color>
</div>
<div name="ten">
    <color>forestgreen</color>
</div>
<div name="eleven">
    <color>honeydew</color>
</div>
<div name="twelve">
    <color>lightsalmon</color>
</div>
<div name="thirteen">
    <color>lightsteelblue</color>
</div>
<div name="fourteen">
    <color>maroon</color>
</div>
<div name="fifteen">
    <color>mediumspringgreen</color>
</div>
<div name="sixteen">
    <color>mediumturquiose</color>
</div>
<div name="seventeen">
    <color>mistyrose</color>
</div>
<div name="eighteen">
    <color>oldlace</color>
</div>
<div name="nineteen">
    <color>olive</color>
</div>
<div name="twenty">
    <color>azure</color>
</div>
</divcolors>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在Javascript中加载XML数据时出错 - Error in loading the XML data in Javascript 使用DOM和JavaScript将XML数据加载到HTML - Loading xml data to html using DOM & javascript 通过ajax和javascript将xml数据提取到div中 - fetching xml data into a div via ajax and javascript 使用JavaScript从xml列表中加载特定元素的xml数据 - Loading xml data for particular element from xml list with javaScript JQGrid数据未使用xml加载 - JQGrid data is not loading with xml 将xml数据重复到div中 - repeat xml data into a div 在IE中使用JavaScript将XML加载到DIV中的问题 - Issue loading XML into DIV using JavaScript in IE 用Javascript解析XML数据 - Parsing XML data with Javascript 解析javascript中的xml数据 - Parse xml data in javascript 使用Javascript对XML数据进行排序 - Sorting of XML data with Javascript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM