Question

首先我不确定这个问题的地方如果不是，请将它指向正确的位置。

我遇到的问题是我可以使第一个单击功能工作并更改html元素，但我无法使第二个单击功能工作并让元素更改回来。我想知道如何解决这个问题？

这是代码。

$(document).ready(function() {
    $('.arrow').click(function(){
        $(this).closest('li').find('ol:first').fadeToggle('fast', 'linear');
        $(this).html('<span class="arrow-alt">&#8595;</span>');
    });

    $('.arrow-alt').click(function(){
        $(this).closest('li').find('ol:first').fadeToggle('fast', 'linear');
        $(this).html('<span class="arrow">&#8594;</span>');
    }); 

});

Answer 1

正如Jared所指出的，当您使用.click()事件时，它将适用于DOM的现有部分。

当您向DOM动态添加元素并希望将事件附加到它们时，如果您使用的是jquery 1.7或更高版本，则必须使用.on()之类的动态事件，或者对于以前的版本使用.delegate()。

请不要再使用.live()方法，因为1.7版本的jquery上已弃用。

Answer 2

<ol>
    <span class="arrow">&#8594;</span>
</ol>

请注意，如果您的html看起来像上面的标记，那么您的代码将在第一个范围内生成第二个跨度，而不是替换跨度。您可以通过更改html函数中的字符串参数来避免这种情况，例如使用removeClass和addClass。

我认为你要找的是这样的（使用JMax提到的on或delegate）

$(document).ready(function () {
    $('ol').on('click', '.arrow', function(event){
        $(this).closest('li').find('ol:first').fadeToggle('fast', 'linear');
        $(this).html('&#8595;');
        $(this).removeClass('arrow');
        $(this).addClass('arrow-alt');
    });

    $('ol').on('click', '.arrow-alt', function(event){
        $(this).closest('li').find('ol:first').fadeToggle('fast', 'linear');
        $(this).html('&#8594;');
        $(this).removeClass('arrow-alt');
        $(this).addClass('arrow');
    }); 
});

Jquery元素替换问题

2 个答案: