Question

以下是php循环的输出html。

<div class="item clearfix" style="cursor: default;">
    <div class="image">
        <a href="/social/user.php?user=user1">
            <img src="https://www.gravatar.com/avatar/b0edee6b101a7aaa324ffd0dfb2f00dc?d=retro&amp;s=32" width="32">
        </a>
    </div>

    <div class="info">
        <a href="/social/user.php?user=user1" class="name">
            User1
        </a>
        <span style="left:40%">Friend Request</span>
        <span style="left:80%">
            <a href="#" class="accept_friend" title="accept_friend">
                <i class="fa fa-check-circle" aria-hidden="true" style="font-size: xx-large; color: green;"></i>
            </a>
        </span>

        <span style="left:88%">
            <a href="#" class="deny_friend" title="deny_friend">
                <i class="fa fa-times-circle" aria-hidden="true" style="font-size: xx-large; color: #CB2C1A;"></i>
            </a>
        </span>
    </div>
</div>

<div class="item clearfix" style="cursor: default;">
    <div class="image">
        <a href="/social/user.php?user=user2">
            <img src="https://www.gravatar.com/avatar/b0edee6b101a7aaa324ffd0dfb2f00dc?d=retro&amp;s=32" width="32">
        </a>
    </div>

    <div class="info">
        <a href="/social/user.php?user=user2" class="name">
            User2
        </a>
        <span style="left:40%">Friend Request</span>
        <span style="left:80%">
            <a href="#" class="accept_friend" title="accept_friend">
                <i class="fa fa-check-circle" aria-hidden="true" style="font-size: xx-large; color: green;"></i>
            </a>
        </span>

        <span style="left:88%">
            <a href="#" class="deny_friend" title="deny_friend">
                <i class="fa fa-times-circle" aria-hidden="true" style="font-size: xx-large; color: #CB2C1A;"></i>
            </a>
        </span>
    </div>
</div>

下一个是我的jquery脚本。

$(document).on("click", "a.accept_friend", function() { 
    var removeit = $(this).closest(':has(.item)').find('.item').fadeOut();
    return removeit;
});

出于某种原因，任何一个班级=＆＃34; accept_friend＆＃34;单击，类=＆＃34;项＆＃34;正在删除的只是.closest（＆＃39;：has（.item）＆＃39;）到点击的事件。

显然，对于最终结果，当class =＆＃34; accept_friend＆＃34;单击我只想要容器类=＆＃34; item＆＃34;要删除的点击元素。

Answer 1

.closest(':has(.item)')找到包含其中包含类项的子元素的元素，这是body标记。在body元素上.find('.item')选择所有.item元素。在目前的情况下是2。

您需要遍历item元素并将其淡出：

$(document).on("click", "a.accept_friend", function() { 
  var removeit = $(this).closest('.item').fadeOut();
  return removeit;
});

JQUERY：这个最接近的类名fadeOut正在淡化多个元素

1 个答案: