个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试使用 html5 和 css 获得 5 星评级。
我所做的是，我拍摄了 2 张图像，一张是红色和绿色的星星。
一开始星星是红色的，当我们点击星星进行评分时，直到点击的星号应该变成绿色。
所以我使用了 onclick 更改图像...
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="images/1.png";
}
else
{
element.src="images/2.png";
}
}
</script>
</head>
<body>
<img id="myimage" onclick="changeImage()"src="images/1.png">
<img id="myimage" onclick="changeImage()"src="images/1.png">
<img id="myimage" onclick="changeImage()"src="images/1.png">
<img id="myimage" onclick="changeImage()"src="images/1.png">
<img id="myimage" onclick="changeImage()"src="images/1.png">
</body>
</html>
我现在需要的是，当我点击星星进行评级时，只有第一颗星会发生变化。相反，直到我点击的星星应该改变颜色......
我该怎么做？？？
最佳答案
首先使用 jQuery 来连接你的事件，使用 on 属性是非常过时的。其次，您有重复的 id 属性，这是无效的。最后，您可以使用 prevAll() 获取所有前面的元素并更新它们。试试这个:
<div class="rating-container">
<img class="star" src="images/1.png">
<img class="star" src="images/1.png">
<img class="star" src="images/1.png">
<img class="star" src="images/1.png">
<img class="star" src="images/1.png">
</div>
$(function() {
$('.rating-container .star').click(function() {
$('.rating-container .star').prop('src', 'images/1.png');
$(this).prevAll('.star').addBack().prop('src', 'images/2.png');
});
});
请注意，该示例正在更改某些 div 元素的 class，因为我无权访问您的图像，但逻辑是相同的。
关于javascript - 我如何使用 javascript 获得 5 星评级，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19318342/
25
4
0
下面的代码是我一直在研究的代码。当我根据产品的计算分数对产品进行评级时，我认为我的逻辑是有缺陷的，这就是我混淆的地方。而且我也不确定如何根据分数创建评级图像。数组中的第一列是得分值，第二列是产品 ID
我正在尝试为大学作业实现 A 星搜索方法，所以我有点需要从头开始，但我在使其以正确的方式工作时遇到了一些麻烦。这是我的问题的图片: 如您所见，它确实找到了一条路径，但不是最简单的路径。 这是我的工具:
我正在寻找一些关于我可以使用什么方法来构建一个 javascript 文件的指针，该文件将把 1-5 下拉菜单变成一系列 5 个可点击的星星(一个老式的 youtube 评级系统) 不需要执行AJAX
嗯，这是我更新的代码。它不会减速，但不会出现路径。 public static IntPosition[] GetPath(BlockType[,] blocks, IntPosition start
嗨，我已经在ubuntu镜像上构建并安装了ziftrCoin钱包。 8084e9de3c23 ubuntu:latest "/bin/bash" 25 hours ago Up About a min
我正在实现双向 A* 搜索(双向搜索是同时从起点和终点执行的，当这两个搜索相遇时，我将获得最短路径 - 至少有一点额外逻辑被抛出)。 有没有人有使用单向 A* 和双向化(!)它的经验 - 我可以期待什
在花了很长时间使这段代码工作之后，有人可以向我解释为什么当我将指向字符串的指针作为参数传递给函数时需要 2 颗星吗？根据定义，指针将地址保存到将放置某个变量的内存中。所以它是一个有自己地址的变量，在这
我正在研究 A* 寻路算法，由于某种原因，在某个时刻我遇到了空指针异常，但我不知道为什么。问题出现在类 Astar 第 79 行，这是 H 值的简单 setter 。 这是 Astar 类: impo
使用 ./* 或 ./. 是否相同？ 例如，如果我尝试 chmod 755 ./* -R 或 chmod 755 ./*.* -R 它会得到相同的结果，使这里的文件和目录使用755权限。但是我想知道这
我正在使用它，并希望将一个新的 css 类“half”添加到星形选择类中，以便只用背景色填充星形的一半:#e54800 https://foundation.zurb.com/building-blo
我从以下位置获得此 CSS: https://www.cssscript.com/simple-5-star-rating-system-with-css-and-html-radios 但我希望星级
我需要开发一个帖子投票系统。每个用户都可以通过点击拇指图标来喜欢一个帖子，通过点击壁炉图标来喜欢一个帖子，将来也许我有一个明星系统作为替代方案。 我正在寻找更好的解决方案来实现这个系统，目前，我有两种
我最近开始学习使用 webgl 创建更复杂的多边形，但是我目前无法创建六 Angular 星形多边形。我尝试过使用 gl.TRIANGLES，但是它创建了不寻常的形状，这根本不是我想要的。 我所说的六
已关闭。此问题需要 debugging details 。目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and the
我有一些评级代码: $('div.rateit').rateit(); 我希望它也能用于添加的元素。 这是插件:http://rateit.codeplex.com/ 最佳答案 它有效! : 如果您查
我正在为死亡金属制作一个网站，想知道是否可以使用边框属性在 CSS3 中制作一个五 Angular 星。我能够找到一些引用资料，使我相信有可能制作出 6 分星，但经过几个小时的精神折磨后，我放弃了制作
我已经从 this stackoverflow thread 实现了自定义评级栏即使我将 numStars 设置为 5 或任何其他数字，它也不会显示超过一颗星 这是代码。 我正在为图像使用矢量绘图。
这些函数定义中的*args和**kwargs是什么意思？ def foo(x, y, *args): pass def bar(x, y, **kwargs): pass 参见Wha
这些函数定义中的*args和**kwargs是什么意思？ def foo(x, y, *args): pass def bar(x, y, **kwargs): pass 参见Wha
标准方法如下:AI:一种现代方法 function UNIFORM-COST-SEARCH node if node is in explored then continue if GOAL
我是一名优秀的程序员,十分优秀！