当div点击时更改图片

我有一个div按钮，其中包含图像。我希望当我点击的div内的图像将改变我把一个jQuery，但我的jQuery只能以1种方式工作，它可以切换到第二个图像，但不能切换回第一个图像。当div点击时更改图片

HTML：

<div class="post-like m-30"> 
    <img class="img-responsive" src="img/like.png" alt=""> 
    <h4 class="bold text-center capital">appreciate this!</h4> 
</div>

CSS：

.post-like{ 
    cursor: pointer; 
} 
.post-like img{ 
    margin: auto; 
}

JS：

$(document).ready(function() { 
    $('.post-like').click(function(){ 
     $(".post-like img").attr('src',"img/like.jpg"); 
     return false; 
    }); 
});

你能教我为什么我的jQuery didnt工作？

来源

2016-03-08 vicario

你的代码工作正常http://jsfiddle.net/QAz2U/1329/。 –

lmao，为什么它不能在我的电脑上工作。对不起，解决这个问题，但如何让它再次切换回来？ – vicario

检查您的浏览器开发工具控制台。 –

要两个src属性之间进行切换，你可以在点击事件添加条件：

$(document).ready(function() { 
 
    $('.post-like').click(function(){ 
 
    var src = $(".post-like img").attr('src'); 
 

 
    if(src=="https://upload.wikimedia.org/wikipedia/commons/2/2f/MRT_Singapore_Destination_1.png") 
 
     $(".post-like img").attr('src',"https://upload.wikimedia.org/wikipedia/commons/1/10/MRT_Singapore_Destination_2.png"); 
 
    else 
 
     $(".post-like img").attr('src',"https://upload.wikimedia.org/wikipedia/commons/2/2f/MRT_Singapore_Destination_1.png"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="post-like m-30"> 
 
    <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/2/2f/MRT_Singapore_Destination_1.png" alt=""> 
 
    <h4 class="bold text-center capital">appreciate this!</h4> 
 
</div><!-- post-like -->

来源

2016-03-08 22:00:50

我认为切换是所有你需要的为什么使用/ toggle语句时可以使用'toggle'来调用更长的时间？ – Riskbreaker

如何使切换？对不起，我知道它愚蠢的问题。但即时通讯仍在学习 – vicario

没有@Riskbreaker它不是所有你需要的，当OP使用一个'img'时，你使用了两个图像。你有两个答案OP，而不是像你想要的那样做，并且我们正在切换'src'属性而不是'img'元素的可见性。如果我们有另一个'img'标签会发生什么？那么你会得到另一种行为。 –

抓住src属性的值，并将其存储在一个变量。使用这个变量作为一个参考if语句，以确定开关，图像：

$(document).ready(function() { 
    $('.post-like').click(function(){ 
     var img=$(this).attr('src'); 
if(img=="img/like.jpg"){ 
$(".post-like img").attr('src',"img/like.jpg"); 
     return false; 
}else{ 
$(".post-like img").attr('src',"img/otherimage.jpg"); 
     return false; 
} 

    }); 
    });

来源

2016-03-08 22:09:34

使其更简单，做切换

$(".post-like").click(function() { 
    $(this).find('img').toggle(); 
});

TOGGLE

来源

2016-03-08 22:10:47 Riskbreaker

nggg，当我输入这个它不起作用$（document）.ready（function（）{ \t（“。post-like”）。click（function（）{ .toggle（）; \t \t}）; \t}）; – vicario

有什么错你的代码，它改变了源代码很好。为了创建一个'点击切换'流程，你需要知道这两个来源，我倾向于通过有两个变量（一个用'特殊'来源和一个空的，这是首次使用时设置）来做到这一点。

$(function() { 
 
    var specialSrc = 'http://lorempixel.com/image_output/nightlife-q-g-160-100-10.jpg', 
 
     img = $('.post-like img'), 
 
     normalSrc; 
 

 
    $('.post-like').click(function(){ 
 
     var src = img.attr('src'); 
 
     
 
     if (!normalSrc) { 
 
      normalSrc = src; 
 
     } 
 
     img.attr('src', src === normalSrc ? specialSrc : normalSrc); 
 

 
     return false; 
 
    }); 
 
});

.post-like{ 
 
    cursor: pointer; 
 
} 
 
.post-like img{ 
 
    margin: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="post-like m-30"> 
 
    <img class="img-responsive" src="http://lorempixel.com/image_output/nightlife-q-c-160-100-4.jpg" alt=""> 
 
    <h4 class="bold text-center capital">appreciate this!</h4> 
 
</div><!-- post-like -->

我也存储在img可变图像，所以您不需要寻找它每一次点击，我已经与较短的语法$(function() {..})取代$(document).ready(function() {..})这做同样的事情）

来源

2016-03-08 22:11:39

当div点击时更改图片

回答

相关问题