在riotjs元素中添加onclick函数来输入标签
Adding onclick function to input labels within riotjs element
从这个工作元素开始,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元素中固有的内部更新函数的名称。
update通常在挂载过程中运行,因此查询中的第1点出现了错误,因为我在挂载过程中运行时没有传入任何事件,从而覆盖了默认的更新函数。因此没有未定义的"目标"。这意味着一旦我将函数名从"update()"更改为"StarsChanged",在声明之前就不需要"function()"了。
这就解决了我所遇到的选择不保留在原地的问题(在查询2中)。去我。
- 如何将输入(type=text)从html表单传递到javascript函数
- 是否可以将一个函数输入连接到另一个函数调用的文本
- JavaScript按钮/输入/函数,字符串反转
- javascript函数,它接受两个输入:一个对象和一个键,并返回对象中该键的相应值
- 在输入字段上有两个函数调用,一个在Blur上,一个不在Angular中
- I'我试图在文本区域中进行特定的输入,调用特定的javascript函数,但没有成功;不起作用
- 使用JAVASCRIPT转换货币.可以't通过我的函数设置转换后的输入文本字段的值
- JavaScript:在调用函数的文本输入上按enter键
- 如何在php中创建一个函数,该函数与文本区域一起工作,通过输入类似[color:red]的内容来打印具有等效颜色的文本
- 是否可以在没有外部输入的情况下使函数具有自我意识
- HTML如何根据javascript函数的返回值限制文本输入
- 函数输入上未终止的文本字符串
- Javascript - 以编程方式执行所有函数输入的方法
- 通过函数输入更改不同的变量
- JavaScript 调整函数输入变量
- mysql数据库中没有通过Javascript函数输入值
- 从函数输入到Javascript中插入带有换行符的单词
- javascript函数输入验证
- 如何在HTML/JS中存储表单函数输入的多个字符串
- javascript中的拆分函数输入type = "text"