jquery点击一个事件更换图片，在点击更换回来

跟星星评分功能一样，点击一个按钮更换图片星星，在点击一下跟换回来，然后相应的input中的数字变换点击li更换img图片，然后input中value数值变换，初始值为va... 跟星星评分功能一样，点击一个按钮更换图片星星，在点击一下跟换回来，然后相应的input中的数字变换
点击li更换img图片，然后input中value数值变换，初始值为value=5 展开





 我来答

3个回答

#合辑# 面试问优缺点怎么回答最加分？

纠结的百小度
2017-07-10 · 超过32用户采纳过TA的回答

知道答主

回答量：70

采纳率：100%

帮助的人：40.6万

我也去答题访问个人页

关注

展开全部

这是你现在的结构；建议星星图标可以用作背景图片；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
</head>
<body>
<style>
*{ margin:0; padding:0;}
ul.stars{ display:block; margin:100px 100px 30px; overflow:hidden;}
ul.stars li{ display:block; float:left; padding:0 4px; cursor:pointer;}
ul.stars li img{ display:block; width:30px; height:30px;}
ul.stars li img.full{ display:none;}
ul.stars li.on img.empty{ display:none;}
ul.stars li.on img.full{ display:block;}
</style>
<script>
$(document).ready(function(e) {
	$("ul.stars li").click(function(){
		$(this).toggleClass("on");
		var stars = $("ul.stars").find("li.on").size();
		$("input#stars").val(stars);
	});
});
</script>
	<form method="get">
		<ul class="stars">
			<li>
				<img class="empty" src="http://img2.imgtn.bdimg.com/it/u=3879777914,4025641504&fm=26&gp=0.jpg" />
				<img class="full" src="http://pic.wenwen.soso.com/p/20100131/20100131155623-694735656.jpg" />
			</li>
			<li>
				<img class="empty" src="http://img2.imgtn.bdimg.com/it/u=3879777914,4025641504&fm=26&gp=0.jpg" />
				<img class="full" src="http://pic.wenwen.soso.com/p/20100131/20100131155623-694735656.jpg" />
			</li>
			<li>
				<img class="empty" src="http://img2.imgtn.bdimg.com/it/u=3879777914,4025641504&fm=26&gp=0.jpg" />
				<img class="full" src="http://pic.wenwen.soso.com/p/20100131/20100131155623-694735656.jpg" />
			</li>
			<li>
				<img class="empty" src="http://img2.imgtn.bdimg.com/it/u=3879777914,4025641504&fm=26&gp=0.jpg" />
				<img class="full" src="http://pic.wenwen.soso.com/p/20100131/20100131155623-694735656.jpg" />
			</li>
			<li>
				<img class="empty" src="http://img2.imgtn.bdimg.com/it/u=3879777914,4025641504&fm=26&gp=0.jpg" />
				<img class="full" src="http://pic.wenwen.soso.com/p/20100131/20100131155623-694735656.jpg" />
			</li>
		</ul>
		<input type="hidden" id="stars" name="stars" />
		<input type="submit" value="提交" style="margin:0 100px;">
	</form>
</body>
</html>

最好的方式是把图片处理一下作为ul的背景图，通过点击li获取索引值来改变ul的背景图片位置；不能上传附件了。。还是上代码吧。。

<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>评价</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>
$(document).ready(function(){
	//星级评分
	$("form p span.radio label.radio").click(function(){
		$(this).parent("span.radio").css("background-position-y",-($(this).index()*19)+"px");
	});
});
</script>
<style>
*{ margin:0; padding:0;}
form p{ display:block; overflow:hidden; padding:10px 20px;}
form p label{ display:block; height:36px; line-height:36px; color:#444; font-size:14px; float:left;}
form p span.radio{ display:block; width:150px; height:19px; background:url(stars.png) left 0px no-repeat; float:left; margin:8px 0 0;}
form p input.radio{ display:none;}
form p label.radio{ width:20%; height:100%; margin:0; cursor:pointer;}
form input.btn{ display:block; width:210px; height:36px; line-height:36px; *line-height:normal; color:#fff; font-size:15px; background:#ffb81f; border:0; border-radius:6px; cursor:pointer; float:left; margin-top:10px;}
</style>
<body>

<form>
	<p>
		<label>服务态度：</label>
		<span class="radio">
			<input class="radio" type="radio" name="star1" value="0" checked />
			<label class="radio" for="star11"></label>
			<label class="radio" for="star12"></label>
			<label class="radio" for="star13"></label>
			<label class="radio" for="star14"></label>
			<label class="radio" for="star15"></label>
			<input id="star11" class="radio" type="radio" name="star1" value="1" />
			<input id="star12" class="radio" type="radio" name="star1" value="2" />
			<input id="star13" class="radio" type="radio" name="star1" value="3" />
			<input id="star14" class="radio" type="radio" name="star1" value="4" />
			<input id="star15" class="radio" type="radio" name="star1" value="5" />
		</span>
	</p>
	<p>
		<label>运输速度：</label>
		<span class="radio">
			<input class="radio" type="radio" name="star2" value="0" checked />
			<label class="radio" for="star21"></label>
			<label class="radio" for="star22"></label>
			<label class="radio" for="star23"></label>
			<label class="radio" for="star24"></label>
			<label class="radio" for="star25"></label>
			<input id="star21" class="radio" type="radio" name="star2" value="1" />
			<input id="star22" class="radio" type="radio" name="star2" value="2" />
			<input id="star23" class="radio" type="radio" name="star2" value="3" />
			<input id="star24" class="radio" type="radio" name="star2" value="4" />
			<input id="star25" class="radio" type="radio" name="star2" value="5" />
		</span>
	</p>
	<p>
		<label>货款发放：</label>
		<span class="radio">
			<input class="radio" type="radio" name="star3" value="0" checked />
			<label class="radio" for="star31"></label>
			<label class="radio" for="star32"></label>
			<label class="radio" for="star33"></label>
			<label class="radio" for="star34"></label>
			<label class="radio" for="star35"></label>
			<input id="star31" class="radio" type="radio" name="star3" value="1" />
			<input id="star32" class="radio" type="radio" name="star3" value="2" />
			<input id="star33" class="radio" type="radio" name="star3" value="3" />
			<input id="star34" class="radio" type="radio" name="star3" value="4" />
			<input id="star35" class="radio" type="radio" name="star3" value="5" />
		</span>
	</p>
	<p>
		<input class="btn" type="submit" value="提交" />
	</p>
</form>
</body>
</html>

附上图片素材

已赞过 已踩过<

评论收起

吼真神到喝觉1E
2017-07-10 · 超过22用户采纳过TA的回答

知道答主

回答量：54

采纳率：0%

帮助的人：29.3万

我也去答题访问个人页

关注

展开全部

$(function(){
    var toggle = true;
    $(".hs_df_xx li").click(function(){
        if(toggle){
            $(this).children("img").attr("src","你要设置的地址");
            toggle = false;
        }else{
            $(this).children("img").attr("src","又变回来的地址");
            toggle = true;
        }
        $("input[name='score']").val($(this).index()+1);
    });
});

追问

还有一点小问题，比如我点第三个前面的第一个跟第二个没有选中，

追答

$(function(){
    $(".hs_df_xx li").click(function(){
        var $ts = $(this);
        var hscl = $ts.hasClass("flg");
	var index = $ts.index();
        if(hscl){
            if(index === 0){
            $(".hs_df_xx li").removeClass("flg").children("img").attr("src","原地址");
            }else{
            $(".hs_df_xx li:gt("+(index-1)+")").removeClass("flg").children("img").attr("src","原地址");
            }					
        }else{
            $(".hs_df_xx li:lt("+(index+1)+")").addClass("flg").children("img").attr("src","你设置的地址");
        }
        $("input[name='score']").val(index+1);
    });
});

本回答被提问者和网友采纳

已赞过 已踩过<

评论收起

6T6p8
2018-04-04 · TA获得超过7639个赞

知道小有建树答主

回答量：49

采纳率：100%

帮助的人：8153

我也去答题访问个人页

关注

展开全部

跟星星评分功能一样，点击一个按钮更换图片星星，在点击一下跟换回来，然后相应的input中的数字变换。
点击li更换img图片，然后input中value数值变换，初始值为value=5。

jquery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计等。

本回答被网友采纳

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

jquery点击一个事件更换图片，在点击更换回来

其他类似问题

为你推荐：