javascript - 仅选择添加到 DOM 的单击元素

Question

我一直在制作这个网络应用程序来测试一下 JQuery。它只是将元素添加到 DOM 中。我在处理新添加元素的点击事件时遇到了问题。我希望能够只更改我单击的元素，而不是更改整组元素。

这是演示的链接 video .

这是我的代码:

    var main = function() {
    $('.btn').prop('disabled', true);

    $('.post-btn').click(function() {
        var text = $('.status-box').val();
        $('<li>').text(text).fadeIn(600).prependTo('.posts');
        $('.status-box').val('');
        $(this).prop('disabled', true);
        $('.counter').text(140);
    });

    $('.status-box').keyup(function() {
        $('.counter').css('color', '#404040');
        var characters = $('.status-box').val().length;
        var charactersleft = 140 - characters;
        $('.counter').text(charactersleft);

        if(charactersleft < 0) {
            $('.post-btn').prop('disabled', true);
            $('.counter').css('color', 'red');
        }

        else if(charactersleft === 140) {
            $('.post-btn').prop('disabled', true);
        }

        else {
            $('.post-btn').prop('disabled', false);
        }
    });

    $('.delete-btn').click(function() {
        $('.selected').fadeOut(300);
        $(this).prop('disabled', true);
    });

    /**
    * Click event starts here
    **/
    $('.posts').on('click', 'li', function(event) {
        $('.posts li').css('background-color', 'lightgray').addClass('selected');
        $('.delete-btn').prop('disabled', false);
    });
}

$(document).ready(main);

我知道 $('.posts li') 适用于所有创建的元素，我只是不知道如何使其仅适用于我单击的元素上。

感谢您的帮助。

Answer 1

使用$(this)。

$('.posts').on('click', 'li', function(event) {
  $(this).css('background-color', 'lightgray').addClass('selected');
  ...