javascript 如何用交互式内容替换 html 输入的基本概念？答案

【问题标题】：Basic concept for how javascript replaces an html input with something interactive?javascript 如何用交互式内容替换 html 输入的基本概念？
【发布时间】：2010-11-17 16:03:02
【问题描述】：

这是一个非常低级的概念性问题。

我有一个内容网站，用户可以使用下拉表单对其他用户留下的 cmets 进行评分，该下拉表单有两个选项，+1 或 -1。

我想把它“转换”成一个好看的向上/向下箭头，就像 reddit cmets。

我知道有一种方法可以通过 CSS + javascript 来实现，但我不明白那个方法是什么以及它是如何工作的，所以我可以开始研究它。我究竟需要做什么才能将此下拉列表变成向上/向下投票小部件？

我不需要关于 cmets 的实际排名、它的算法或任何其他方面的帮助，我只是想了解如何用更友好的东西替换这个 UI 元素。

【问题讨论】：

标签： javascript css comments

【解决方案1】：

基本技术是使用javascript隐藏实际的表单元素（可能通过设置display:none的样式），然后通过DOM操作方法添加您的小部件。然后，在上/下箭头上设置 onclicks 以更新隐藏表单元素的值，每次增加/减少 1。

【讨论】：

【解决方案2】：

为此，您必须有两张图片。当它被点击时，最好发出 ajax 请求 并将值更新到数据库。

如果评分只是一次，那么您可以在成功更新数据库后禁用图像。

在 SO 中，他们使用四张图片进行赞成和反对。其中两个表示单击状态，其中两个表示默认状态。当您单击具有默认状态的图像时，将调用服务器，如果成功，则图像将更改为活动图像。

【讨论】：

奇怪的是，SO 没有为此使用 CSS 精灵。
我不认为 CSS sprite 在这种情况下会有用。

【解决方案3】：

看看这些。

http://developer.yahoo.com/yui/examples/button/btn_example07.html

也许还有这些

http://developer.yahoo.com/yui/examples/button/btn_example04.html

我相信它们都适用于内联标记或 javascript 生成。

【讨论】：