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é?

1
vicario 9 mars 2016 à 00:49

4 réponses

Meilleure réponse

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 -->
0
Zakaria Acharki 8 mars 2016 à 22:00

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)

0
Rogier Spieker 8 mars 2016 à 22:11

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;
}

     });
    });
0
M.Brian 8 mars 2016 à 22:09

Simplifiez et basculez

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

BASCULER

0
Rino Raj 10 mars 2016 à 10:54