Question

我尝试使用jQuery向Fadein写一个小脚本最近的图像，但由于某些原因，这段代码无效。任何人都可以帮我解释语法吗？感谢

$( ".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>

小提琴：http://jsfiddle.net/e27r8/597/

Answer 1

img元素不是单击按钮的直接父元素。你需要使用最接近获得包含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

Answer 2

它不是祖先，所以你需要遍历 -

$(this).closest( ".swiper-slide" ).find("img").fadeTo( "slow" , 0.5, function() {

Answer 3

由于img不是input的父级，所以你必须这样做：

 $(this).closest(".swiper-slide").find("img")

您必须使用类swiper-slide获取父div，然后从其中获取img。

Answer 4

你应该上升一级，然后找到

$(...).parent().find(...);



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

修改

我错过了<center>代码使用.parent().parent()

如何淡化最近的图像？

4 个答案: