Question

我在这里使用JQuery移动框架，所以我有两个'页面'，实际上它们都存在于一个HTML文档中。您可以通过左上角的汉堡菜单图标在两者之间导航。

有一个活动页面。每个活动都有一个“添加到收藏夹”按钮。单击时，事件将填充“收藏夹”页面。我是通过克隆div类来做到的。

var add = $('.add-to-fav');

add.on('click', function(){

//change button status
if ($(this).text() == "Add to favourites")
{       
    $(this).text("Remove from favourites");
    $(this).closest(".event-block").clone().appendTo('#fav-list');

} else {

    $(this).text("Add to favourites");
    //get this instance of event block and remove from #fav-list

}

});

我的问题在于尝试通过再次单击同一按钮来删除（或不喜欢）该事件。我希望从事件页面和收藏页面都可以实现这一点。

实现这一目标最优雅的方法是什么？

这是一个codepen - 我试图删除尽可能多的无关代码 http://codepen.io/MartinBort/pen/EajBXB/

Answer 1

首先，您对具有相同ID的两个页面使用相同的面板。使用外部面板或为每个面板指定唯一ID。如果您打算使用外部面板，请将其放在任何页面之外并手动初始化。

$(function () {
    $("#menu-panel").panel().enhanceWithin();
});

要添加侦听器，请使用pagecreate每页触发一次。这样，您可以根据包含页面为按钮分配不同的功能。使用event.target定位创建的页面中的按钮.add-fav而不是DOM中的其他按钮。

您可以从 public-events 页面中删除收藏页面中的“事件”，方法是检索其“标题文字，因为您没有使用ID”或类来区分事件

$(document).on("pagecreate", "#public-events", function (event) {
    $('.add-to-fav', event.target).on('click', function () {
        if ($(this).text() == "Add to favourites") {
            $(this).text("Remove from favourites");
            $(this).closest(".event-block").clone().appendTo('#fav-list');
        } else {
            $(this).text("Add to favourites");
            /* retrieve event title */
            var eventTitle = $(this).closest(".event-block").find("h2").text();
            /* loops through event blocks in favourite page */
            $('#favourites #fav-list .event-block h2').each(function () {
                if ($(this).text() == eventTitle) {
                    /* remove matching event */
                    $(this).closest(".event-block").remove();
                }
            });
        }
    });
}).on("pagecreate", "#favourites", function (event) {
    $('.add-to-fav', event.target).on('click', function () {
        $(this).closest(".event-block").remove();
    });
});

<强> Demo

JQuery / Jquery Mobile - 通过切换从div中删除类实例的最佳方法

1 个答案: