Question

我已经使用xslt生成了一个html页面，其中列出了一些虚拟餐厅，并且我一直试图为他们添加星级评分。我已经设法让它在浏览器和w3schools代码编辑器中作为单独的代码工作，但是我无法在主页面中显示它。

之前有过类似的问题，我已经在答案中尝试了这些建议（将脚本移动到外部.js文件，在页面中放置一些未使用的html标签，以便脚本引用永久性

一些代码片段，以显示我尝试做的事情（省略了很多代码以保持简洁）：

的xml：

<restaurants>
...
<restaurant>
    <name></name>
    <rating></rating>
</restaurant>
...
</restaurants>

xsl stylesheet：

<body>
    <h1>Restaurants List</h1>
    <xsl:for-each select="restaurants/restaurant">
        <canvas id="rating" width="181px" height="28px">
            <xsl:value-of select="rating"/>
        </canvas>
            Rating: <xsl:value-of select="rating"/>/5
            <hr/>
    </xsl:for-each>

    <img src="images/star.png" id="star" width="29px">
</body>

javaScript（xsl stylesheet <script>中的<head>个标记之间）：

function rate() {
    var c = document.getElementById("rating");
    var ctx = c.getContext("2d");
    var img = document.getElementById("star");
    var num = document.getElementById("rating").innerHTML * 29;
    ctx.rect(0,0,num,28);
    ctx.fillStyle = ctx.createPattern(img, 'repeat-x');
    ctx.fill();
}

这是一个餐馆列表，每个餐馆旁边都有一个空的181x28画布。

以下代码片段适用于w3schools＆＃39; Tryit编辑：

<body onload="draw()">
  <p>image to use:</p>
  <img src="https://i.imgur.com/POxaCQd.png" id="star" width="29" height="28">
  <br>
  <canvas id="myCanvas" height="28" width="100">3.5</canvas>
</body>

<script>    
function draw() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("star")
  var pat = ctx.createPattern(img, 'repeat-x');
  var r = c.innerHTML * 29
  ctx.rect(0, 0, r, 28);
  ctx.fillStyle = pat;
  ctx.fill();
}    
</script>

它也适用于JSFiddle，但前提是它全部粘贴到html字段中;如果它被分成html和javaScript它停止工作（我可能会误用小提琴，我不确定）： https://jsfiddle.net/pqzqbejz/2/ 与 https://jsfiddle.net/pqzqbejz/3/

<小时/> 附注：如上所述，该代码适用于w3schools＆＃39;编辑器，包括xml / xslt编辑器，但是当实现时，星星只出现在列表中的第一个餐馆旁边。假设主要问题已得到修复，那么有关如何让它出现在所有这些问题上的任何进一步的想法？我尝试了一个xsl：for-each循环，并将函数调用放在每个画布的onload中，希望每次创建画布时调用它，但我怀疑问题是函数使用了元素ID，我不能拥有多个共享id的画布。无论哪种方式，这对我来说不如主要问题重要，但任何和所有帮助都表示赞赏。

Answer 1

如果您为所有canvas元素提供了一个类名，那么您可以使用document.getElementsByClassName来获取所有这些元素，然后您可以迭代它们以一次绘制一个

function draw()
{
  var cs = document.getElementsByClassName("myCanvas");
  for (var i = 0; i < cs.length; i++)
  {
    drawCanvas(cs[i]);
   }
}

function drawCanvas(c)
{
  var ctx = c.getContext("2d");
  var img = document.getElementById("star")
  var pat = ctx.createPattern(img, 'repeat-x');
  var r = c.innerHTML * 29
  ctx.rect(0, 0, r, 28);
  ctx.fillStyle = pat;
  ctx.fill();
}

然后，您的XSLT将如下所示

<body onload="draw()">
    <h1>Restaurants List</h1>
    <xsl:for-each select="restaurants/restaurant">
        <canvas id="rating{position()}" width="181px" height="28px" class="myCanvas">
            <xsl:value-of select="rating"/>
        </canvas>
            Rating: <xsl:value-of select="rating"/>/5
            <hr/>
    </xsl:for-each>

    <img src="https://i.imgur.com/POxaCQd.png" id="star" width="29px" style="display:none" />
</body>

请参阅http://xsltransform.net/gVhD8S4

处的转化示例

或者，如果您愿意，请在https://jsfiddle.net/pqzqbejz/5/

的jsfiddle查看最终结果

如何在画布中制作星级评分？

1 个答案: