Question

我在自己的网站上练习并偶然发现了这个问题。我确信这是一个简单的修复，但想知道如何实现它。我希望我的所有列表项或甚至只是一个特定的类受到影响。我知道.each（）方法访问jquery对象中匹配的所有元素。此代码使用.each（）方法有效地访问所有列表项。 $(function() { var $li = $('li'); $li.hide().each(function(index) { $(this).delay(700 * index).fadeIn(700) }); });

此代码在这里没有.each（）方法，因为我尝试将它放在多个位置，甚至尝试在短手文档就绪函数之后将整个块包装在一个新的匿名函数中

$(function() {
var $list = $('.nav');
$list.on('click', function() {
    $(this).animate({
        opacity: 0.0,
        paddingLeft: '+=80'
    }, 500, function() {
        $(this).remove();
    });
});

}）;

这仅适用于具有属性nav的第一个类项目。很感谢任何形式的帮助。谢谢！

Answer 1

试试这个：

$(function() {
    $(document).on('click', '.nav', function() {
        $(this).animate({
            opacity: 0.0,
            paddingLeft: '+=80'
        }, 500, function() {
            $(this).remove();
        });
    });
});

您是否想要通过单击删除所有内容？如果是这样，以下工作。

    $(function() {
        $(document).on('click', '.nav', function() {
            $('.nav').animate({
                opacity: 0.0,
                paddingLeft: '+=80'
            }, 500, function() {
                $('.nav').remove();
            });
        });
    });

Answer 2

您不需要.each()，因为.on()已经适用于列表中的每个项目。

您编写的代码已经适用于.nav类的每个项目。下面是一个工作代码片段来说明。您可以单击这三个项目中的每一个并观看它们消失。如果它在您的应用程序中不起作用，则必须归因于其他一些问题。检查你的jQuery对象，确保它确实包含你认为它所做的所有元素！

$(function() {
var $list = $('.nav');
$list.on('click', function() {
    $(this).animate({
        opacity: 0.0,
        paddingLeft: '+=80'
    }, 500, function() {
        $(this).remove();
    });
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="nav">
First item
</div>

<div class="nav">
Second item
</div>

<div class="nav">
Third item
</div>

如何在jquery中使用.on（）方法和.each（）方法。？

2 个答案: