Question

我昨天使用jQuery Parse RSS feed with JS将一些RSS解析成菜单，我得到了很大的帮助，并且受此启发我希望使用类似的东西来控制网站上的某些图表栏。

一些背景知识：

我们的目标是在即将进行的技术评论中使用浮动分数一个网页，意味着你为产品分配一个绝对分数（让我们比如67）然后最高分将能够像新的一样移动更好的产品打入市场。这样你仍然可以阅读去年的评论，并将分数用于某事有意义的是，现在67岁的分数是根据这几年来衡量的最大得分数。希望它有意义。

无论如何，我们的CMS只允许将javascript嵌入到新闻条目中，因此我无法在SQL中存储我们的评论分数或使用php，而我正在考虑使用XML（不是最佳的，但它应该有效））。然后，每个评论将包含一定数量的结果，包括前面提到的最终得分（以及一些中间子得分）。我需要能够插入一段JS代码，从XML文件中提取特定评论的分数，并插入绘制条形图所需的HTML代码。

我有一个JSfiddle设置，它包含XML，它有图表（虽然硬编码），并使用我之前的问题中的jQuery代码，我可以提取结果，但代码循环遍历所有的XML和我不知道如何挑选我需要的具体评论编号，也不知道如何根据最高分数来衡量，所以它只是打印现在所有内容并根据最大分数计算得分。 100.我还没有把这些值绑定到我的图表上，所以测试版只是以ul / li打印结果。

Link to JSFiddle

所以基本上我需要某种代码，我可以从我的HTML中调用

ShowScores(testno)

将写入第一个

内的所有内容

<div class="row">..</row>

包含条形图，其中条形图的％ - 宽度将被计算为分配的分数除以maxscore：

每个项目有3个指定分数：scorePicture，scoreFeature，scoreUI和1个计算总分（加权平均值）
3个分数中的每一个都存在全局最大分数：topscorePicture，topscoreFeature，topscoreUI

当我吮吸JS时，我已经花了5个小时才达到这一点，而且我不知道如何从例如一个testscore.xml文件，然后用jQuery提取我需要的东西 - 我可能还需要一些帮助使我的HTML加载脚本，即如何在之后调用它。 The documentation on jQuery关注加载XML中的所有内容而不仅仅是特定节点？

感谢所有帮助。

我自己对某些伪代码的想法是一个脚本，当我从我的HTML文档中调用时会做类似的事情

function(reviewNo)
var max1 = load maxscore1 from XML
var max2 = load maxscore2 from XML
var max3 = load maxscore3 from XML

var score1 = load assignedscore1 for reviewNo from XML
var score2 = load assignedscore2 for reviewNo from XML
var score3 = load assignedscore2 for reviewNo from XML

Calculate % width of bar 1, bar 2 and bar 3 and save as variables as math.round()
write HTML DIV code and subsitute the width of the bars with the calculated values from above

Answer 1

好的，所以我认为jQuery不会给我我需要的东西，所以我转向使用

加载XML的普通JS

function loadXMLDoc(filename)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else // code for IE5 and IE6
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}

然后我将HTML中的代码用作：

<script>
    // Which test no should be loaded
    var testNo = 1;

    //Load the XML
    xmlDoc=loadXMLDoc("testscores.xml");

    //Extract the highest score for picture
    tsp=xmlDoc.getElementsByTagName("topscorePicture")[0];
    topspvalue= tsp.childNodes[0];

    //Extract highest score for features
    tsf=xmlDoc.getElementsByTagName("topscoreFeature")[0];
    topsfvalue= tsf.childNodes[0];

    //Extract highest score for UI
    tsui=xmlDoc.getElementsByTagName("topscoreUI")[0];
    topsuivalue= tsui.childNodes[0];

    //Extract  picture score for the specific test no.
    sp=xmlDoc.getElementsByTagName("scorePicture")[testNo];
    spvalue=sp.childNodes[0];

    //Extract Feature score for the specific test no.
    sf=xmlDoc.getElementsByTagName("scoreFeature")[testNo];
    sfvalue=sf.childNodes[0];

    //Extract UI score for the specific test no.
    sui=xmlDoc.getElementsByTagName("scoreUI")[testNo];
    suivalue=sui.childNodes[0];

    //Calculate current scores
    scorePicture = Math.round(Number(spvalue.nodeValue)/Number(topspvalue.nodeValue)*100);
    scoreFeature = Math.round(Number(sfvalue.nodeValue)/Number(topsfvalue.nodeValue)*100);
    scoreUI = Math.round(Number(suivalue.nodeValue)/Number(topsuivalue.nodeValue)*100);
    scoreTotal = Math.round(0.5*scorePicture + 0.25*scoreFeature + 0.25*scoreUI);

    //Construct HTML
    HTMLchunkStart = "<div style=\"float: Right; text-align: right; width: 40px; font-weight: 500; padding-left: 20px; color: #666;\"><i class=\"fa fa-picture-o\"></i></div><div class=\"progress\" style=\"background-color:#E2E2E2\">";
    pictureBar = "<div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\""+Number(spvalue.nodeValue)+"\" aria-valuemin=\"0\" aria-valuemax=\""+Number(topspvalue.nodeValue)+"\" style=\"width:"+ scorePicture+"%"+";\">"+scorePicture+"%</div>";
    HTMLchunk1 =  "</div> <div style=\"float: Right; text-align: right; width: 40px; font-weight: 500; padding-left: 20px; color: #666;\"><i class=\"fa fa-cogs\"></i></div><div class=\"progress\" style=\"background-color:#E2E2E2\">";
    featureBar = "<div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\""+Number(sfvalue.nodeValue)+"\" aria-valuemin=\"0\" aria-valuemax=\""+Number(topsfvalue.nodeValue)+"\" style=\"width:"+ scoreFeature+"%"+";\">"+scoreFeature+"%</div>";
    HTMLchunk2 = " </div><div style=\"float: Right; text-align: right; width: 40px; font-weight: 500; padding-left: 20px; color: #666;\"><i class=\"fa fa-user\"></i></div><div class=\"progress\" style=\"background-color:#E2E2E2\">";
    UIbar= "<div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\""+Number(suivalue.nodeValue)+"\" aria-valuemin=\"0\" aria-valuemax=\""+Number(topsuivalue.nodeValue)+"\" style=\"width:"+ scoreUI+"%"+";\">"+scoreUI+"%</div>";
    HTMLchunk3 =  "</div> <div style=\"padding-top: 3px;float: Right; text-align: right; width: 40px; font-weight: 500; padding-left: 20px; color: #666;\"><i class=\"fa fa-star\"></i></div><div class=\"progress progress-lg\" style=\"background-color:#E2E2E2;height: 30px;\">"; 
    totalBar =  "<div class=\"progress-bar progress-bar-info\" role=\"progressbar\" aria-valuenow=\""+scoreTotal+"\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width:"+ scoreTotal+"%"+";padding-top: 4px;\">"+scoreTotal+"%</div>";

    //Write the HTML
    document.write(HTMLchunkStart + pictureBar + HTMLchunk1+featureBar+HTMLchunk2+UIbar+HTMLchunk3+totalBar);
</script>

目前我把它直接放在我的HTML中，但我想将它放在一个单独的文件中，只需通过例如调用代码即可。

<script>showScore(1)</script>

获取XML中的第二个条目。我是如此接近，但我想在正确的方向上推动如何使我的代码成为一个可以接受单个输入的函数，它将被用作“testNo”变量，然后返回所有的HTML代码我在我的document.write最后。

我也意识到我的JS可能不是最有效也不漂亮，所以任何关于清理的建议也是受欢迎的。

想到的另一个特征是可以根据分数改变条形的颜色。当前的“进度条”类只是纯蓝色，但我可以追加另一个类来仅改变颜色。在我看来，这可以通过为颜色创建一些类，然后依赖于％得分，将相应的颜色类添加到HTML代码中。如果有人知道如何做到这一点，我也会感激一些意见。我会使用开关从数组中选择类名还是什么？

Answer 2

好吧......在这里对自己说一点，但是本着向所有可能在未来冒险的人讲述整个故事的精神，当前的一段代码现在使用一个开关为每个人设置HTML颜色然后使用上面描述的代码插入四个条形码和代码，并将其放入使用

调用的函数中

<script>showScore(reveiwNo);</script>

在我的HTML中。它工作得很好。我想链接到最终的代码，但它被用在我们新网站的工作模板上，所以我宁愿把它们留给自己，直到网站上线 - 我也不想做广告。

从XML源动态设置条形图值

2 个答案: