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>

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

这是我的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时，你需要在其末尾添加数据（'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 + "']"));
    });
});

Gridster.js删除小部件

1 个答案: