Jquery/Gridster 按钮影响所有项目而不是单个项目答案

【问题标题】：Jquery/Gridster button affecting all items not single onesJquery/Gridster 按钮影响所有项目而不是单个项目
【发布时间】：2017-06-02 09:10:03
【问题描述】：

我正在使用 Gridster 框架创建仪表板，每个仪表板项目都有一个“删除”和“固定”按钮。但是我遇到的问题是，当我单击“固定”按钮（将面板锁定到位）时，它会普遍影响所有面板，而不是单个面板。删除按钮可以正常工作并删除单个面板。我不能添加单独的 ID 或类，因为面板需要是通用的。为什么 pin 按钮在这种情况下不起作用？

别针（将所有面板锁定到位，但仅用于锁定有问题的单个面板）：

$(document).on("click", ".gridster .pin-button", function () {

    var pin = $(".gridster ul").gridster().data('gridster');
    if (pin.drag_api.disabled) {
        pin.enable($(this).parent());
    } else {
        pin.disable($(this).parent());
    }
});

删除按钮（正确删除相关面板）：

$(document).on("click", ".gridster .delete-button", function () {

    var gridster = $(".gridster ul").gridster().data('gridster');
    gridster.remove_widget($(this).parent());

});

示例面板：

<div class="gridster row">
    <ul>
        <li class="gs_w" data-row="1" data-col="1" data-sizex="4" data-sizey="3">
            <button class="pin-button"><img src="pin.png"></button>
            <button class="delete-button"><img src="Close.png"></button>
            ... panel content ...
        </li>
    </ul>
</div>

【问题讨论】：

标签： jquery html gridster

【解决方案1】：

这是因为您的 pin 选择器是：

var pin = $(".gridster ul").gridster().data('gridster');

可能会找到另一个 .gridster ul，这应该与当前 gridster 相关，因此您可能有：

var pin = $(this).parent('.gridster');

【讨论】：

如果我将 var 更改为此，似乎根本不起作用。虽然只有一个网格员。但我明白你在说什么

【解决方案2】：

所以根据https://github.com/dustmoo/gridster.js 我所要做的就是为我的主 Gridster 分配一个静态类，即：

<script type="text/javascript">
    var gridster;

    $(function () {
        gridster = $(".gridster ul").gridster({
            widget_base_dimensions: [100, 100],
            widget_margins: [5, 5],
            helper: 'clone',
            static_class: 'card_static',
            draggable: {
                items: ".gs_w:not(.card_static)"
            },
            resize: {
                enabled: true
            }
        }).data('gridster');
        });
</script>

然后将我的 Pin JS 更改为：

$(document).on("click", ".gridster .pin_button", function () {

if ($(this).parent().hasClass("card_static")) {

$(this).parent().removeClass("card_static")

} else{
$(this).parent().addClass("card_static")
}

});

【讨论】：