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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery点击一个事件更换图片，在点击更换回来相关的知识，希望对你有一定的参考价值。

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

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

<!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>

附上图片素材

 参考技术A $(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);
    );
);

本回答被提问者和网友采纳 参考技术B

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

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

（android:点击换图系列一）通过ImageView点击更换图片

大家好，我是豹豹哥，友爱互融，共同进步😘🤞

文章目录

项目背景：

要完成老师提出的一个需求（对象是一个灯，要实现按一下切换一下”亮灭“状态，分别用两张图片表示）
本文以ImageView为例解决

解决方案：

XML部分文字描述：

对于main.xml（主UI）文件来说，里面的ImageView控件肯定是少不了的，而且只要一个ImageView就够了

XML代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <ImageView
        android:id="@+id/ima_lamp"
        android:layout_width="110dp"
        android:layout_height="180dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/lamp" />

</RelativeLayout>

MainActivity部分文字描述：

首先要求中说了要变换亮灭样式，所以我们肯定要定义一个Boolean值来表示亮灭状态，然后就是重写onClick()方法了，用一个if判断，如果传入的Boolean值是真，就调用表示亮的图片：反之就调用表示灭的图片

MainActivity.java代码：

(尽早适应英文注释，有益无害,博主英文水准欠佳，请将就一下)

package com.example.admin.bilibili;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;


public class MainActivity extends Activity 

    private ImageView lamp;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);//this method can cancel the  tittle bar of APP
        setContentView(R.layout.activity_main);//make the ID(activity_main) load in the MainActivity

        lamp = findViewById(R.id.ima_lamp);//bind
        lamp.setOnClickListener(new View.OnClickListener() //monitor

            private boolean OPEN = false;//the flag to judge weather the lamp is open

            @Override
            public void onClick(View v) 
                // TODO Auto-generated method stub
                if (!OPEN) //if !open ,invoking the picture(co_lighting_close),and turn the flag to true,than next click will be false and invoking the picture(co_light_open)
                    lamp.setImageResource(R.drawable.co_lighting_close);
                    OPEN = true;
                 else //if open,invoking the picture(co_light_open),and turn the flag to false,than next click will be false and invoking the picture(co_light_close)
                    lamp.setImageResource(R.drawable.co_lighting_open);
                    OPEN = false;
                
            
        );

###本文的图片是co_light_close和co_light_open(以防万一，提一下比较好)

效果：点一下，换个图

（相信你们的想象力）

图片资源：

搜索阿里巴巴矢量图
https://www.iconfont.cn
里面有超多的资源
独学而无友，则孤陋而寡闻。欢迎大家评论与私信，一起变强！😘🤞

以上是关于jquery点击一个事件更换图片，在点击更换回来的主要内容，如果未能解决你的问题，请参考以下文章

jquery怎么实现点击一个元素更换背景图片，连续点击永远在2张图片之间更换

jquery怎么实现点击一个元素更换背景图片，连续点击永远在2张图片之间更换

android button 点击后如何更换背景，然后点击其他按钮时该按钮背景换回来？

jquery怎么打开本地图片预览，点击确定后上传

JavaScript基础 显示/隐藏效果 点击图片,DIV显示,图片更换,点击更换后的图片,DIV隐藏

（android:点击换图系列一）通过ImageView点击更换图片