Question

我正在使用fabric js并尝试在尝试删除组的父项时删除一组项目。以下是我的代码。

jQuery(document).on('click', ".deleteBtn", function () {
    if (canvas.getActiveObject()) {
        var product_id = canvas.getActiveObject().get('product_id');
     }
        var canvasObj = canvas.getObjects();

    for(var i = 0; i < canvasObj.length; i++){

        var objRef = canvasObj[i];

        var accessoryId = objRef.get('accessory_product_id');

        var product_type = objRef.get('product_type');

        if(accessoryId == product_id && product_type == "accessory"){
            canvas.remove(objRef);
        }

    }
});

代码实际上正在运行，但是没有删除具有相同accessoryId和product_type父项的所有项目，这些项目是尝试删除的活动对象，另外两个项目正在正确删除。画布上只留下两个项目。组中共有5个项目。那些是图像。我无法找到问题请帮忙。谢谢！

HTML代码

<div id="content-tab-3" class="visualiser-product-category content-tab active">
    <ul>
        <li>
             <img src="http://localhost/green_live/wp-content/uploads/2016/07/Winter_Spice.png" class="visualizer-product-img" alt="Placeholder" data-quantity="1" data-product_type="parent" data-product_id="343">
              <img src="http://localhost/green_live/wp-content/uploads/2016/07/Winter-Spice-Desk-Floral.jpg" class="hide accessory-343">
              <img src="http://localhost/green_live/wp-content/uploads/2016/07/Winter-Spice-Garland.jpg" class="hide accessory-343">
              <img src="http://localhost/green_live/wp-content/uploads/2016/07/Winter-Spice-Tabletop.jpg" class="hide accessory-343">
              <img src="http://localhost/green_live/wp-content/uploads/2016/07/Winter-Spice-Wreath.jpg" class="hide accessory-343">
         </li>
    </ul>
</div>

Answer 1

您好我在您的代码中注意到您尝试获取活动对象ID ，但无论是否有活动对象，您继续循环，删除对象< /强> !! 也许，这会导致问题。

我将展示 forEach（）函数的示例，但只有在存在活动对象的情况下才会继续删除对象：

jQuery(document).on('click', ".deleteBtn", function () { //only if there is active object, do i delete objects if (canvas.getActiveObject()) { //get productId of active object var product_id = canvas.getActiveObject().product_id; //loop on the canvas objects canvas.getObjects().forEach(function (object) { if(object.accessoryId == product_id && object.product_type == "accessory"){ canvas.remove(object); } });//end forEach }//end if });//end 'click'

希望有所帮助，祝你好运。

javascript从canvas中删除具有唯一属性的多个对象

1 个答案: