1

当我的页面上的一个复选框被点击时，我抓住它包含的元素并将整个块附加到页面的另一部分。像这样：

  $('.favourite [type="checkbox"]').change(function () {
        var check = $(this),
            checked = $(check).attr("checked"),
            id = $(check).attr("id").split("-")[1],
            parent = $("#food-" + id),
            parentContent = $("<div />").append($("#food-" + id).clone()).html(),
            favelist = $(".favourites .content");

        if (checked === "checked") {
            $(favelist).append(parentContent);
        }
    });

我希望在将新复选框粘贴到收藏夹时选中它。我可以对包含复选框和周围元素的 HTML 块的 parentContent 做些什么，以便在附加时已经检查过它？

4

3 回答 3

1

您不需要将字符串附加到收藏夹，您可以立即附加一个 jQuery 元素。通过这样做，所有通过 DOM 设置的属性和样式都将被保留，例如checked.

这意味着您可以同时删除$("<div />").append(和).html()。

结果代码如下。

   $('.favourite [type="checkbox"]').change(function () {
        var check = $(this),
            checked = $(check).attr("checked"),
            id = $(check).attr("id").split("-")[1],
            parent = $("#food-" + id),
            parentContent = $("#food-" + id).clone(),
            favelist = $(".favourites .content");

        if (checked === "checked") {
            $(favelist).append(parentContent);
        }
    });

它也会更快。

于 2013-10-25T15:42:02.610 回答
0

尝试这个，

checked = this.checked,

或者

checked = $(check).prop("checked"),

代替

checked = $(check).attr("checked"),

和Codition一样，

if (checked === true) {
     $(favelist).append(parentContent);
}

完整的代码，

$('.favourite [type="checkbox"]').change(function () {
    var check = $(this),
        checked = this.checked,
        id = $(check).attr("id").split("-")[1],
        parent = $("#food-" + id),
        parentContent = $("<div />").append($("#food-" + id).clone()).html(),
        favelist = $(".favourites .content");

    if (checked === true) {
        $(favelist).append(parentContent);
    }
});
于 2013-10-25T15:35:21.873 回答
0

我会给这个旧大学尝试...

$('.favourite').on('click','[type="checkbox"]',function(){
    var chk = this.checked,
        id = this.id.split("-")[1],
        parent = $("#food-" + id),
        parentContent = $("<div />").append($("#food-" + id).clone()).html(),
        $favelist = $(this).find(".content");

    if (chk === "checked") {
        $favelist.append(parentContent).find('input[type="checkbox"]').prop('checked');
    }
});

这增加了一些委托操作，并使用 vanilla JS 版本checked和id用于性能目的。它还消除了您使用favelist.

于 2013-10-25T15:42:11.283 回答