Question

我有一个小页面，您可以使用按钮将不同颜色的方块添加到div中。添加它们后，您可以通过双击任何创建的方块来删除它们。

添加元素时，我的代码效果很好。然而，当我想删除一个正方形时，我只是删除了一个，然后我就无法使该元素在HTML上消失，即使计数器确实减少了。我在使用remove（）函数做错了什么？现在我只专注于蓝色（Azul）颜色。

这是我的代码

var azules = 0;

var rojos = 0;
var amarillos = 0;
var verdes = 0;
function eliminar(cuadro){


    azules = parseInt(jQuery('#num-azules').text());
    verdes = parseInt(jQuery('#num-verdes').text());
    rojos = parseInt(jQuery('#num-rojos').text());
    amarillos = parseInt(jQuery('#num-amarillos').text());

    if(cuadro[0].classList[1]=='blue'){

        azules = azules -1;
    }
    else if(cuadro[0].classList[1]=='red'){

        rojos--;
    }
    else if(cuadro[0].classList[1]=='yellos'){

        amarillos--;
    }
    else if(cuadro[0].classList[1]=='green'){

        verdes--;
    }
    cuadro.remove();

    jQuery('#num-azules').text(azules);
    jQuery('#num-verdes').text(verdes);
    jQuery('#num-rojos').text(rojos);
    jQuery('#num-amarillos').text(amarillos);

}


function agregar(){
    jQuery('span#num-azules').val(azules);
    var numCuadros = jQuery("#numero").val();
    var color = $('#color option:selected').text();
    for( i = 0; i< numCuadros; i++){
        if(color=='Azul'){
            /*jQuery(".square").append(function(){
                return jQuery('<div class="square blue"> </div>').ondblclick(eliminar);

            })*/
            var newSquare = jQuery('<div class="square blue"> </div>')
            var a = jQuery(".squares").append(newSquare);
            newSquare.dblclick(function(){eliminar(newSquare);})
            azules += 1;
        }
        else if(color=='Rojo'){
            jQuery(".squares").append('<div class="square red"> </div>')
            rojos+= 1;

        }
        else if(color=='Amarillo'){
            jQuery(".squares").append('<div class="square yellow"> </div>')
            amarillos+= 1;

        }
        else if(color=='Verde'){
            jQuery(".squares").append('<div class="square green"> </div>')
            verdes+= 1;

        }

    }


    jQuery('#num-azules').text(azules);
    jQuery('#num-verdes').text(verdes);
    jQuery('#num-rojos').text(rojos);
    jQuery('#num-amarillos').text(amarillos);
}



/*
* jQuery("#agregar").click(function(){

 agregar();

 });

 VS

 jQuery("#agregar").click(agregar());
* */

jQuery('#num-azules').text(azules);
jQuery('#num-verdes').text(verdes);
jQuery('#num-rojos').text(rojos);
jQuery('#num-amarillos').text(amarillos);

jQuery("#agregar").click(function(){

    agregar();

});

HTML：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="styles/reset.css"/>
    <link rel="stylesheet" href="styles/main.css"/>
</head>
<body>

<div class="main-content">

    <div class="toolbar">
        Numero Cuadrados: <input id="numero"type="text"/>
        <select id="color" name="color">
        <option value="azul">Azul</option>
        <option value="rojo">Rojo</option>
        <option value="amarillo">Amarillo</option>
        <option value="verde">Verde</option>
        </select>
        <button id="agregar">Agregar</button>

    </div>

    <div class="squares">



    </div>
    <div class="numeros">
        <p>Azules:    <span id="num-azules">0</span> </p>
        <p>Rojos:    <span id="num-rojos">0</span></p>
        <p>Verde:    <span id="num-verdes">0</span></p>
        <p>Amarillo: <span id="num-amarillos">0</span></p>



    </div>




</div>
<script src="scripts/jquery-1.11.3.min.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>

Answer 1

这是注册/侦听事件的低效方式，最好将事件处理委托给包装器（父）容器：

$("#container").on("dblclick", ".square", function(){ 
    $(this).remove(); 
)};

on适用于动态创建的元素;由于容器已经在DOM中，它可以继续监听来自任何其他新创建的具有类.square的子元素的事件。

http://api.jquery.com/on/

编辑：
解决反问题的一种方法是做这样的事情：

var StateObj = function(){
    this.counter = 0; 
    this.arrSquares = []; 

    this.increaseCounter = function(){ 
        this.counter += 1; 
    }, 

    this.decreaseCounter = function(){ 
        this.counter -= 1; 
    }, 

    this.addSquare = function(id, color){
        this.arrSquares.push({id: id, color: color}); 
    }, 

    this.getSquareById = function(id){ 
        return square = $.grep(this.arrSquares, function(){ return id == id; });            
    }
}

var stateObj = newStateObj(); 

$("#container").on("dblclick", ".square", function(e){ 
    $(this).remove(); 
    var id = $(e.currentTarget).attr("id"); 
    stateObj.increaseCounter(); 
    console.log(stateObj.counter); 
)};

JQuery删除不删除指定的div

1 个答案: