javascript - Gridster.js 删除小部件

Question

我正在网页中使用 Gridster.js，并尝试删除带有图像悬停时出现的按钮的小部件。要执行此操作，我使用函数 gridster.remove_widget() 我在插件网站的文档中找到了这里 http://gridster.net/删除我的小部件，但它在这里不起作用，这是我的 HTML :

        <div class="gridster">
          <ul style="height: 480px; position: relative; ">
            <li data-id="1" data-row="1" data-col="1" data-sizex="2" data-sizey="1" class="gs_w">
                <img src="img/icon.png"/>
                <img src="img/mod.png" class="mod 1"/>
                <img src="img/close.png" data-close="1" class="close"/>
            </li>
            <li data-id="2" data-row="3" data-col="1" data-sizex="1" data-sizey="1" class="gs_w">
                <img src="img/icon.jpg"/>
                <img src="img/mod.png" class="mod 2"/>
                <img src="img/close.png" data-close="2" class="close"/>
            </li>

            <li data-id="3" data-row="3" data-col="2" data-sizex="2" data-sizey="1" class="gs_w">
                <img src="img/icon3.jpg"/>
                <img src="img/mod.png" class="mod 3"/>
                <img src="img/close.png" data-close="3" class="close"/>
            </li>
            <li data-id="4" data-row="1" data-col="3" data-sizex="2" data-sizey="2" class="gs_w"><img src="img/icon5.jpg"/>
                <img src="img/mod.png" class="mod 4"/>
                <img src="img/close.png" data-close="4" class="close"/>
            </li>

            <li data-id="5" data-row="1" data-col="5" data-sizex="1" data-sizey="1" class="gs_w">
                <img src="img/icon2.jpg"/>
                <img src="img/mod.png" class="mod 5"/>
                <img src="img/close.png" data-close="5" class="close"/>
            </li>

          </ul>
        </div>

所以我在照片上设置了 2 个小图标，一个用于修改，另一个用于删除小部件/图像，但删除按钮不起作用。

这是我的 JS 文件:

var gridster = "";
$(document).ready(function () {
    $(".gridster ul").gridster({
        widget_margins: [1, 1],
        widget_base_dimensions: [140, 140],
        shift_larger_widgets_down: false
    });

    $(".gs_w").hover(function (){
        var id = $(this).attr("data-id");
        //show close button on hover
        $("ul").find("[data-close='" + id + "']").show();
        //show modifie button on hover
        $("."+id).show();
    });
    $(".gs_w").mouseleave(function (){
        var id = $(this).attr("data-id");
        //hide close button on hover
        $("ul").find("[data-close='" + id + "']").hide();
        //hide close button on hover
        $("."+id).hide();
    });
    $(".close").click(function(){
        var id=$(this).attr("data-close");
        console.log(id);
        //$("ul").find("[data-id='" + id + "']").remove();
        gridster.remove_widget($("ul").find("[data-id='" + id + "']"));
    });
});

抱歉我生疏的英语...

Answer 1

当您声明 gridster 时，您需要在其末尾添加 data('gridster') 并将其附加到变量，例如 gridster。然后你就可以使用gridster api了。这是工作示例:

var gridster = "";
$(document).ready(function () {
    gridster = $(".gridster ul").gridster({
        widget_margins: [1, 1],
        widget_base_dimensions: [140, 140],
        shift_larger_widgets_down: false
    }).data('gridster');

    $(".gs_w").hover(function (){
        var id = $(this).attr("data-id");
        //show close button on hover
        $("ul").find("[data-close='" + id + "']").show();
        //show modifie button on hover
        $("."+id).show();
    });
    $(".gs_w").mouseleave(function (){
        var id = $(this).attr("data-id");
        //hide close button on hover
        $("ul").find("[data-close='" + id + "']").hide();
        //hide close button on hover
        $("."+id).hide();
    });
    $(".close").click(function(){
        var id=$(this).attr("data-close");
        console.log(id);
        //$("ul").find("[data-id='" + id + "']").remove();
        gridster.remove_widget($("ul").find("[data-id='" + id + "']"));
    });
});