Question

我有一个div按钮，包含一个图像。我想当我点击div时它内部的图像会改变我放了一个jquery但我的jquery只能以1种方式工作它可以切换到第二个图像但是不能切换回第一个图像。

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没有用吗？

Answer 1

要在两个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 -->

Answer 2

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

     });
    });

Answer 3

使其更简单并执行切换

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

TOGGLE

Answer 4

您的代码没有任何问题，它改变了源代码。为了创建一个“点击切换”流，你需要知道两个来源，我倾向于通过两个变量（一个带有特殊的源和一个空的变量）来实现这一点。，首次使用时设置。）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我还将图片存储在img变量中，因此您无需每次点击都能查找该图片，并且我已将$(document).ready(function() {..})替换为$(function() {..})较短的语法Button button = (Button) view.findViewById(R.id.delete_button); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { getFragmentManager().beginTransaction() .remove(WorkoutSets.this).commit(); } });执行相同的操作）

div点击时更改图像

4 个答案: