Quiero hacer una lista en la que el usuario puede agregar elementos haciendo clic en un botón, cambiar su color con un clic en el elemento y eliminarlos con un clic largo en el elemento.

Mi código funciona bien para agregar divs y cambiar su color:

$(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');
});

Pero luego me gustaría poder eliminar un solo div con un clic largo. Encontré algunos ejemplos como los siguientes:

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

Sin embargo, no funciona con 'this'. Pero si uso '.item' en su lugar, obviamente, todos los elementos adjuntos se eliminan.

0
peddersen 1 sep. 2014 a las 22:26

2 respuestas

La mejor respuesta

Dentro de su función setTimeout, usted está en un ámbito diferente. this tiene un significado diferente. En su lugar, puede almacenarlo en caché:

$(document).on('mousedown', '.item', function(){
    var $this= $(this);
    timeoutId = setTimeout(function(){ $this.remove() }, 500);
})
0
Stryner 1 sep. 2014 a las 18:36

Puede almacenar la marca de tiempo del evento de mousedown cada evento tiene una marca de tiempo en su prototipo

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

0
D.Dobchev 1 sep. 2014 a las 19:02