从此工作元素开始,sans-js:http://jsfiddle.net/37z1z7g1/
<star-rating></star-rating>
<script type="riot/tag">
<star-rating>
<div class="star-rating">
<input class="rb0" id="Ans_1" name="numericRating" type="radio" value="0" checked="checked" />
<input class="rb1" id="Ans_2" name="numericRating" type="radio" value="1" />
<input class="rb2" id="Ans_3" name="numericRating" type="radio" value="2" />
<input class="rb3" id="Ans_4" name="numericRating" type="radio" value="3" />
<input class="rb4" id="Ans_5" name="numericRating" type="radio" value="4" />
<input class="rb5" id="Ans_6" name="numericRating" type="radio" value="5" />
<input class="rb6" id="Ans_7" name="numericRating" type="radio" value="6" />
<input class="rb7" id="Ans_8" name="numericRating" type="radio" value="7" />
<input class="rb8" id="Ans_9" name="numericRating" type="radio" value="8" />
<input class="rb9" id="Ans_10" name="numericRating" type="radio" value="9" />
<input class="rb10" id="Ans_11" name="numericRating" type="radio" value="10" />
<label for="Ans_1" class="star rb0l"></label>
<label for="Ans_2" class="star rb1l"></label>
<label for="Ans_3" class="star rb2l"></label>
<label for="Ans_4" class="star rb3l"></label>
<label for="Ans_5" class="star rb4l"></label>
<label for="Ans_6" class="star rb5l"></label>
<label for="Ans_7" class="star rb6l"></label>
<label for="Ans_8" class="star rb7l"></label>
<label for="Ans_9" class="star rb8l"></label>
<label for="Ans_10" class="star rb9l"></label>
<label for="Ans_11" class="star rb10l last"></label>
<div class="rating"></div>
<div class="rating-bg"></div>
</div>
</star-rating>
</script>
请注意,如果您单击其中一颗星星,它会保存所选星星数量的“值”(单击星星 4,前 4 颗星星在失去鼠标焦点后将保持选中状态)。
当我添加一些要在单击星号时运行的 js 逻辑时,这就是我最终得到的结果(出于 JSFiddle 的目的,已用 console.log 替换了对父函数的调用):http://jsfiddle.net/0u5oLyp5/
function update(e) {
this.score = parseInt(e.target.value)/2;
if (this.score) {
//parent.UpdateScore(this.score);
console.log(this.score);
}
return true;
}
[连同
onclick="{ update }"
添加到每个标签元素]
我这里有两个问题:
1) 请注意,我已将单词 function 放在“update(e)”声明前面,这与 https://muut.com/riotjs 指南中的所有示例相反。 ,因为如果我不这样做,我就会得到
Uncaught TypeError: Cannot read property ‘target’ of undefined
因为它似乎在页面加载时运行该函数,而“e”尚未定义,而不仅仅是声明该函数。我发现这很奇怪,但我不确定我哪里出了问题。
2) 尽管我在更新函数末尾设置了“return true”(以重新启用默认事件),但当鼠标失去焦点时,单击星星不再将选择保持为蓝色突出显示。一旦我从每个标签元素中删除“onclick='{ update }'”,选择就会再次起作用,因此这肯定是我无法成功触发默认事件处理程序的问题。
有人能指出我哪里出错了吗?
最佳答案
问题似乎是我将函数命名为“update”,这也是所有 Riot 元素固有的内部更新函数的名称。
更新通常在安装过程中运行,因此我的查询的第1点出现错误,因为我在安装过程中运行时覆盖了默认更新函数,没有传入任何事件。因此没有未定义的“目标”。这意味着一旦我将函数名称从“update()”更改为“StarsChanged”,我就不需要在声明之前使用“function()”。
这也解决了我所遇到的选择未保留在原位的问题(在查询 2 中)。跟我走吧。
关于javascript - 将 onclick 函数添加到 riotjs 元素内的输入标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31786038/