jQuery/Javascript-按不同的单击时间编辑和删除附加元素

我想制作一个列表，用户可以通过单击按钮添加元素，通过单击元素更改其颜色，并通过长时间单击元素删除它们

我的代码可以很好地添加div并更改其颜色：

$(document).ready(function(){
$('button').click(function(){
    var toAdd = $('input[name=shop-item]').val();
    if (toAdd == ''){
        return false;
    }
    else {
        $('#list').append('<div class="item item-red">' + toAdd + '</div>');
    });

$(document).on('click', '.item', function(){
    $(this).toggleClass('item-red');
    $(this).toggleClass('item-green');
});

---

但是，它不适用于“

this

”。但是如果我改用“

.item

”，显然所有附加的项目都会被删除

在

setTimeout

函数中，您处于不同的作用域中<代码>此具有不同的含义。您可以缓存它：

$(document).on('mousedown', '.item', function(){
    var $this= $(this);
    timeoutId = setTimeout(function(){ $this.remove() }, 500);
})

---

您可以存储mousedown事件时间戳 每个事件在其原型中都有时间戳

var mousedown timestamp=0
$（文档）.on（'mousedown'，函数（事件）{
mouseDownTimestamp=event.timeStamp；}
);
$（文档）.on（'mouseup'，函数（事件）{
//如果鼠标在499ms后向上移动
if（mouseDownTimestamp

$(document).on('mousedown', '.item', function(){
    var $this= $(this);
    timeoutId = setTimeout(function(){ $this.remove() }, 500);
})