Question

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

我的代码可以正常添加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');
});

但是我希望能够通过长按来删除单个div。我找到了一些如下例子：

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

但是，它不适用于“this”。但是如果我改为使用“.item”，显然所有附加项都会被删除。

Answer 1

在setTimeout功能中，您的范围不同。 this有不同的含义。你可以改为缓存它：

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

Answer 2

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

var mouseDownTimestamp = 0 $(document).on('mousedown',function(event){ mouseDownTimestamp = event.timeStamp;} ); $(document).on('mouseup',function(event){ //if the mouse up is after 499ms if(mouseDownTimestamp < event.timeStamp - 499){ //or $(event.target).remove(); //or $(event.target).closest('.class of the holder').remove(); $(selector).remove(); } });

jQuery / Javascript - 按不同的点击次数编辑和删除附加的元素

2 个答案: