Javascript 仅选择添加到DOM的已单击元素

我一直在制作这个web应用程序来测试JQuery。它只是将元素添加到DOM中。我对新添加元素的单击事件一直有问题。我希望能够只更改我单击的一个，而不是整个元素组

这里有一个演示的链接

以下是我的代码：

    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);

var main=function（）{
$（'.btn'）.prop（'disabled'，true）；
$（'.post btn'）。单击（函数（）{
var text=$（'.status box'）.val（）；
$（“
”）.text（text）.fadeIn（600）.prependTo（“.posts”）；
$（'.status box'）.val（''）；
$（this.prop（'disabled'，true）；
$（'计数器'）.text（140）；
});
$（'.status box'）.keyup（函数（）{
$（'.counter'）.css（'color'，'#404040'）；
变量字符=$（'.status box'）.val（）.length；
变量charactersleft=140个字符；
$（'.counter'）.text（charactersleft）；
if（charactersleft<0）{
$（'.post btn'）.prop（'disabled'，true）；
$（'.counter'）.css（'color'，'red'）；
}
else if（charactersleft==140）{
$（'.post btn'）.prop（'disabled'，true）；
}
否则{
$（'.post btn'）.prop（'disabled'，false）；
}
});
$（'.delete btn'）。单击（函数（）{
$（'.selected'）。淡出（300）；
$（this.prop（'disabled'，true）；
});
/**
*单击此处开始事件
**/
$（'.posts'）。在（'click'，'li'，函数（事件）{
$（'.posts li'）.css（'background-color'，'lightgray'）.addClass（'selected'）；
$（'.delete btn'）.prop（'disabled'，false）；
});
}
$（文件）.ready（主）；

我知道

$（'.posts li'）

适用于所有创建的元素，我只是不知道如何使其仅适用于我单击的元素

谢谢您的帮助。

使用

$（此）

使用

$（此）

---

只需更换这一行：

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

关于这一点：

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

---

$（this）代替$（'.posts li'）

只需替换这一行：

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

关于这一点：

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

---

$（这个）而不是$（'.posts li'）

我怎么能把这么简单的事情搞砸呢。看来我可能有点想得太多了。真有趣，我怎么能把这么简单的事情搞砸。看来我可能有点想过头了。