简短但准确

Question

我的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来更改图像？

Answer 1

您可以使用jQuery的attr()功能。例如，如果您的img代码的id属性为“my_image”，则可以执行以下操作：

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

然后您可以使用jQuery更改图像的src：

$("#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);
    }
});

Answer 2

人们在更改图像源时常犯的一个错误就是没有等待图像加载来执行后续操作，比如图像尺寸等的成熟。您需要使用jQuery .load()方法在图像加载后执行操作。

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

});

编辑原因：https://stackoverflow.com/a/670433/561545

Answer 3

了解更多信息。我尝试使用以下语法在jquery中为广告图像设置src属性和attr方法：$("#myid").attr('src', '/images/sample.gif');

此解决方案非常有用，但是如果更改路径也会改变图像的路径而不起作用。

我正在寻找解决此问题的方法，但一无所获。

解决方案是将＆＃39; \＆＃39;在路径的开头： $("#myid").attr('src', '\images/sample.gif');

这个技巧对我来说非常有用，我希望它对其他人有用。

Answer 4

如果您多次更新图片，并且该图片被已填充，并且不会更新，请在末尾添加一个随机字符串：

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

Answer 5

我将向您展示如何更改图片src，以便在您点击图片时，它会旋转HTML中的所有图片（d1 ID和{{1具体而言）...您的HTML中是否有2个或更多图像。

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

完整代码

c1

细分

创建包含图片的链接的副本（注意：您还可以使用链接的href属性来添加功能...例如 display the working link below each image ）：

$(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();

    });
});

检查HTML中有多少图像并创建一个变量来跟踪显示的图像：
```
    var $images = $("#d1 > .c1 > a").clone();  ;
```
修改文档的HTML，以便仅显示第一张图片。删除所有其他图像。
```
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(); });循环遍历包含图像的jQuery对象。 ++$imgShow % $length首先将我们的计数器增加1，然后根据有多少图像来修改该数字。这将使结果索引从++$imgShow % $length循环到0，这是length-1对象的索引。这意味着此代码将使用2,3,5,10或100个图像...按顺序循环显示每个图像，并在到达最后一个图像时在第一个图像处重新开始。

此外， .attr() 用于获取和设置图片的“src”属性。要从$images对象中选择元素，我使用$images形式将$images设置为 jQuery context 。然后我使用 .eq() 来选择具有我感兴趣的特定索引的元素。

的 jsFiddle example with 3 images

您还可以将$(selector, context)存储在数组中的 jsFiddle example with 3 images

以下是如何将锚标签中的hrefs合并到图像周围：
的 jsFiddle example

Answer 6

如果不仅有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>

Answer 7

希望这可以工作

\bSpotify-Apple\b|\bUS10\b|\bextra functions\b

<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />
<button id="changeSize">Change Size</button>

Answer 8

你也可以用这种方式用jQuery做到这一点：

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

如果图像源有多种状态，则可以有条件。

Answer 9

尝试调用重新验证按钮时遇到了同样的问题。经过一些搜索，现在几乎所有着名的浏览器（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);
 }

＆＃39; theUrl＆＃39;用于渲染新的验证码图像，在您的情况下可以忽略。最重要的一点是生成新的URL，迫使FF和IE重新渲染图像。

Answer 10

I have the same wonder today, I did on this way :

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

Answer 11

这是在Vanilla（或简单的纯JavaScript）JavaScript中完成的保证方式：

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

Answer 12

使用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);
        }
    });

Answer 13

我在这里制作了一个具有此功能的代码笔。我也会在这里给你一个代码的细目。

Codepen

$(function() {

  //Listen for a click on the girl button
  $('#girl-btn').click(function() {

    // When the girl button has been clicked, change the source of the #square image to be the girl PNG
    $('#square').prop("src", "https://homepages.cae.wisc.edu/~ece533/images/girl.png");
  });

  //Listen for a click on the plane button
  $('#plane-btn').click(function() {

    // When the plane button has been clicked, change the source of the #square image to be the plane PNG
    $('#square').prop("src", "https://homepages.cae.wisc.edu/~ece533/images/airplane.png");
  });

  //Listen for a click on the fruit button
  $('#fruits-btn').click(function() {

    // When the fruits button has been clicked, change the source of the #square image to be the fruits PNG
    $('#square').prop("src", "https://homepages.cae.wisc.edu/~ece533/images/fruits.png");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<img src="https://homepages.cae.wisc.edu/~ece533/images/girl.png" id="square" />
<div>
  <button id="girl-btn">Girl</button>
  <button id="plane-btn">Plane</button>
  <button id="fruits-btn">Fruits</button>

  <a href="https://homepages.cae.wisc.edu/~ece533/images/">Source of Images</a>
</div>

Answer 14

只需添加一点，使其更小：

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

Answer 15

简短但准确

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

let pic=[
  "https://picsum.photos/id/237/40/40", // arbitrary - eg: "img1_on.gif",
  "https://picsum.photos/id/238/40/40", // arbitrary - eg: "img2_on.gif"
];

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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>

Answer 16

无法使用CSS更改图像源。

唯一可能的方法是使用Javascript或任何Javascript库，例如jQuery。

逻辑 -

图片位于div内，该图片没有class或id。

因此逻辑将选择图像所在的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>

Answer 17

您应将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 () {
        doSomething();
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });

使用jQuery更改图像源

17 个答案:

的 jsFiddle example with 3 images

简短但准确

逻辑 -

带有演示输出的示例代码 -