使用jQuery更改图像源

2020/09/21 02:01 · javascript ·  · 0评论

我的DOM看起来像这样:

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

当有人点击的形象,我想图片src来改变<img src="imgx_off.gif">这里x表示图像编号1或2。

这可能吗,还是我必须使用CSS来更改图像?

您可以使用jQuery的attr()函数。例如,如果img标签的id属性为“ my_image”,则可以执行以下操作:

<img id="my_image" src="first.jpg"/>

然后,您可以src像这样使用jQuery 更改图片的:

$("#my_image").attr("src","second.jpg");

要将其附加到click事件中,可以编写:

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

要旋转图像,可以执行以下操作:

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

人们在更改图像源时常犯的常见错误之一是不等待图像加载来执行后续操作,例如图像尺寸到期等.load()。在图像加载后,您将需要使用jQuery 方法进行处理。

$('yourimageselector').attr('src', 'newsrc').load(function(){
    this.width;   // Note: $(this).width() will not work for in memory images

});

修改原因:https//stackoverflow.com/a/670433/561545

想要查询更多的信息。我尝试使用以下语法在广告图片的jquery中使用attr方法设置src属性:$("#myid").attr('src', '/images/sample.gif');

此解决方案很有用,并且可以使用,但是如果更改路径,则图像的路径也会更改而无法使用。

我正在寻找解决此问题的方法,但没有发现任何问题。

解决方案是将“ \”放在路径的开头:
$("#myid").attr('src', '\images/sample.gif');

这个技巧对我非常有用,我希望对其他人也有用。

如果不仅有jQuery或其他资源杀死框架-每个用户每次下载许多kb只是一个简单的技巧-而且还有本机JavaScript(!):

<img src="img1_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img1_off.jpg':'img1_on.jpg';">
<img src="img2_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img2_off.jpg':'img2_on.jpg';">

这可以写得更一般,更优雅:

<html>
<head>
<script>
function switchImg(img){
    img.src = img.src.match(/_on/) ? 
        img.src.replace(/_on/, "_off") : 
        img.src.replace(/_off/, "_on");
}
</script>
</head>
<body>
    <img src="img1_on.jpg" onclick="switchImg(this)">
    <img src="img2_on.jpg" onclick="switchImg(this)">
</body>
</html>

我将向您展示如何更改图像src,从而使您在单击图像时可以在HTML中的所有图像(特别是在d1id和c1class中)中旋转...无论您的HTML中有2个还是更多图像

我还将向您展示文档准备好后如何清理页面,以便最初仅显示一张图像。

完整代码

$(function() {

    var $images = $("#d1 > .c1 > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );  

    $("#d1 > .c1 > a").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();

    });
});

细目

  1. 创建包含图像的链接的副本(注意:您还可以利用链接的href属性来增加功能……例如,在每个图像下方显示工作链接):

        var $images = $("#d1 > .c1 > a").clone();  ;
  2. 检查HTML中有多少图像,并创建一个变量来跟踪显示的图像:

    var $length = $images.length;
    var $imgShow = 0;
  3. 修改文档的HTML,以便显示第一张图像。删除所有其他图像。

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") ); 
  4. 绑定一个函数以在单击图像链接时进行处理。

        $("#d1 > .c1 > a").click(function(event) { 
            $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
            event.preventDefault();
        });

    上面代码的核心是++$imgShow % $length用来循环浏览包含图像的jQuery对象。++$imgShow % $length首先将我们的计数器加1,然后将其修改为具有多少图像的数量。这将使结果索引从循环0length-1,即$images对象的索引这意味着此代码将适用于2、3、5、10或100张图像...依次循环浏览每个图像,并在到达最后一个图像时在第一个图像处重新启动。

    另外,.attr()用于获取和设置图像的“ src”属性。为了从$images对象中选择元素,我使用form 设置$imagesjQuery上下文$(selector, context)然后,我.eq()只用我感兴趣的特定索引来选择元素。


带有3张图片的jsFiddle示例


您也可以将
srcs 存储在数组中。
带有3张图片的jsFiddle示例

这是在图像周围合并来自定位标记的href的方法
jsFiddle示例

希望这可以工作

<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />
<button id="changeSize">Change Size</button>
$(document).ready(function() {
    var flag = 0;
    $("button#changeSize").click(function() {
        if (flag == 0) {
            $("#dummyimage").attr("src", "http://dummyimage.com/250x155/");
            flag = 1;
        } else if (flag == 1) {
            $("#dummyimage").attr("src", "http://dummyimage.com/450x255/");
            flag = 0;
        }
    });
});

您应该将id属性添加到图像标签,如下所示:

<div id="d1">
   <div class="c1">
            <a href="#"><img id="img1" src="img1_on.gif"></a>
            <a href="#"><img id="img2" src="img2_on.gif"></a>
   </div>
</div>

那么您可以使用以下代码更改图像的来源:

 $(document).ready(function () {
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });

如果您多次更新图像并且图像被缓存并且不更新,请在末尾添加一个随机字符串:

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());

您也可以通过以下方式使用jQuery:

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

如果图像源有多个状态,则可以设置条件。

我在尝试重新输入验证码按钮时遇到了同样的问题。经过一番搜索,现在以下功能几乎可以在所有著名的浏览器(chrome,Firefox,IE,Edge等)中正常工作:

function recaptcha(theUrl) {
  $.get(theUrl, function(data, status){});
  $("#captcha-img").attr('src', "");
  setTimeout(function(){
       $("#captcha-img").attr('src', "captcha?"+new Date().getTime());
  }, 0);
 }

'theUrl'用于呈现新的验证码图像,在您的情况下可以忽略。最重要的一点是生成新的URL,强制FF和IE重新渲染图像。

使用jQuery更改图像源 click()

元件:

    <img class="letstalk btn"  src="images/chatbuble.png" />

码:

    $(".letstalk").click(function(){
        var newsrc;
        if($(this).attr("src")=="/images/chatbuble.png")
        {
            newsrc="/images/closechat.png";
            $(this).attr("src", newsrc);
        }
        else
        {
            newsrc="/images/chatbuble.png";
            $(this).attr("src", newsrc);
        }
    });

我今天也有同样的疑问,我是这样做的:

//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');  
});

这是在Vanilla(或简单的Pure)JavaScript中完成此任务的保证方式:

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;

只是增加一点,使其更小:

$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});

简短但准确

$("#d1 img").click(e=> e.target.src= pic[e.target.src.match(pic[0]) ? 1:0] );

无法使用CSS更改图像源。

唯一可能的方法是使用Javascript或任何类似jQuery的Javascript

逻辑-

图像在div内,没有图像classid带有该图像。

因此,逻辑将是选择div图像所在位置内的元素

然后使用循环选择所有图像元素,并使用Javascript / jQuery更改图像src

带演示输出的示例代码-

$(document).ready(function()
{
    $("button").click(function()
    {
      $("#d1 .c1 a").each(function()
      {
          $(this).children('img').attr('src', 'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe');
      });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

<button>Change The Images</button>
本文地址:http://javascript.askforanswer.com/shiyongjquerygenggaituxiangyuan.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!