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

Answer 2

只需替换此行：

$('.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'）

仅选择添加到DOM

2 个答案: