javascript - 如何淡入最近的图像？

Question

我尝试使用 jQuery 编写一个小脚本来使最接近的图像淡入淡出，但由于某些原因，此代码无法正常工作。谁能帮我解决语法问题？谢谢

$( ".delimg" ).click(function() {
  $(this).closest( "img" ).fadeTo( "slow" , 0.5, function() {
      $("input[type='button']").toggle(
         function(){
             $(this).val("Undelete");
       }, 
          function(){
             $(this).val("Delete");
       }
);
  });
});

HTML

<div class="swiper-slide">
    <img src="http://20percents.com/backend/uploads/C0d49a7de7b635477125ffffa8df7b931.jpg" class="swipe-image">
    <center><input type="button" class="delimg" value="Delete"></center>
</div>
<div class="swiper-slide">
    <img src="http://20percents.com/backend/uploads/C0d49a7de7b635477125ffffa8df7b932.jpg" class="swipe-image">
    <center><input type="button" class="delimg" value="Delete"></center>
</div>

fiddle :http://jsfiddle.net/e27r8/597/

Answer 1

img 元素不是被单击按钮的直接父级。您需要使用 closest 来获取包含的 div，然后在其中搜索图像。试试这个:

$(".delimg").click(function () {
    $(this).closest(".swiper-slide").find('img').fadeTo("slow", 0.5);
});

Updated fiddle

另请注意，toggle 不能再以您现在的方式使用。它现在只会显示/隐藏元素，不会在连续点击时运行特定功能。

要根据需要更改按钮的文本，您可以像这样将函数传递给 val():

$(".delimg").click(function () {
    var $button = $(this);
    $button.closest(".swiper-slide").find('img').fadeTo("slow", 0.5, function() {
        $button.val(function(i, value) {
            return value == "Delete" ? "Undelete" : "Delete";
        });
    });
});

Example fiddle