J'ai un bouton div act like qui contient une image. Je veux que lorsque je clique sur la div, l'image à l'intérieur changera. Je mets un jquery mais mon jquery ne fonctionne que de 1 façon, il peut passer à la deuxième image mais ne peut pas revenir à la première image.
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;
});
});
Pouvez-vous m'apprendre pourquoi mon jquery n'a pas fonctionné?
4 réponses
Pour basculer entre les deux src attributs, vous pouvez ajouter une condition dans votre événement de clic:
$(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 -->Il n'y avait rien de mal avec votre code, cela a très bien changé la source. Afin de créer un flux `` cliquer pour basculer '', vous devez connaître les deux sources, j'ai tendance à le faire en ayant deux variables (une avec la source `` spéciale '' et une vide, qui est définie lors de la première utilisation).
$(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 -->J'ai également stocké l'image dans la variable img, vous n'avez donc pas besoin de la rechercher à chaque clic, et j'ai remplacé $(document).ready(function() {..}) par la syntaxe plus courte $(function() {..}) qui fait la même chose)
Saisissez la valeur de l'attribut src et stockez-la dans une variable. Utilisez cette variable comme référence dans une instruction if pour déterminer l'image vers laquelle basculer:
$(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;
}
});
});
Simplifiez et basculez
$(".post-like").click(function() {
$(this).find('img').toggle();
});