美文网首页
通过js/jquery分别实现点击select改变图片路径

通过js/jquery分别实现点击select改变图片路径

作者: kate2020 | 来源:发表于2016-12-14 18:26 被阅读30次

这是一个非常简单的功能,实现的方式也很多,这里主要讲一下通过js和jquery的实现代码:

js代码:

var img=document.getElementById('test-img')
var sel=document.getElementById('sel')
sel.addEventListener('change',function(){
    img.src=this.value;
})

jquery代码:

$('#sel').change(function(){
    $('#test-img').attr('src',$(this).val());
})

相关文章

  • 通过js/jquery分别实现点击select改变图片路径

    这是一个非常简单的功能,实现的方式也很多,这里主要讲一下通过js和jquery的实现代码: js代码: jquer...

  • js与jquery方法对比

    一.文档就绪 jquery实现 简写形式为: js实现 二、元素选择 三、点击事件 jquery实现 js实现 四...

  • jquery实现点击图片全屏查看功能

    怎么现在每次写代码都是用的别人的轮子,呜呜 jquery实现点击图片全屏查看功能 js代码 css代码

  • 2019-03-15

    ①基于layui select的实时搜索组件(重写layui select)。实现思路:通过jquery的inpu...

  • web常用库

    js retina.js 实现retina屏幕图片自动替换 slick.js jQuery插件,实现各种轮播图 w...

  • js一些使用的记录

    moment 计算时间差 依赖jQuery实现的多语言包 jquery.localize html js 当前路径...

  • 用按钮控制轮播图

    用按钮来控制轮播图,核心就是通过按钮的点击事件来改变图片的路径。 以下就来介绍怎么实现: 1、先创建一个主体 2、...

  • jQuery基础知识

    jQuery jQuery能实现的效果,js都能实现;js能实现的效果,jQuery未必能实现 jQuery大体分...

  • jquery.lazyload.js插件实现图片延迟加载用法

    1.这款插件以来jquery.js,所以首先要引用jquery文件 2.要有img标签 图片的真实路径要写在dat...

  • 2018-10-19 全屏实现方法

    JS控制浏览器全屏,通过点击按钮实现 JS 全屏方法 JS退出全屏的方法(通过点击按钮退出全屏) JS通过按esc...

网友评论

      本文标题:通过js/jquery分别实现点击select改变图片路径

      本文链接:https://www.haomeiwen.com/subject/sdtwmttx.html