1

尝试使用$(this).attr("id"). 我想要的是，当单击并选中一个复选框时，它的 ID 会记录在一个 div 中#log（这有效）。当它被点击而不被选中时，jQuery 应该检查记录的行是否与复选框的 ID 相同。如果是这样，则应删除该跨度。

这是一个jsfiddle：http: //jsfiddle.net/fLskG/1/

因此，当您单击时，会出现Option 1文本option-0（这是复选框的 ID）。当您再次单击该按钮时，该文本应该会消失。

这是脚本：

$(document).ready(function() {
    $(".menu").find("input:checkbox").click(function() {

        if ($(this).is(":checked")) {
            $("#textValue").text($(this).val());
            $("#log").append("<span>" + this.id + "</span><br/>");
        }
        else {
            if ($("#log").children("span").contains($(this).attr("id"))) {
                console.log($(this).attr("id"));
                $("#log").children("span").remove();
            }
        }
    });
});​

我很确定问题出在“包含”上。但我不知道如何让 jQuery 检查是否有一个跨度包含第一个函数中选中的复选框的 ID。

谢谢。

4

3 回答 3

1

只需检查一下。我认为您只需要删除未选中复选框的跨度

http://jsfiddle.net/fLskG/6/

 $(document).ready(function() {
    $(".menu").find("input:checkbox").click(function() {

        if ($(this).is(":checked")) {
            $("#textValue").text($(this).val());
            $("#log").append("<span>" + this.id + "</span><br/>");
        }
        else {
            if ($("#log").children("span:contains("+($(this).attr("id"))+")")) {
                console.log($(this).attr("id"));
                $("#log").children("span:contains("+($(this).attr("id"))+")").remove();
            }
        }
    });
});
于 2012-05-05T18:02:26.813 回答
1

您可以采用 HTML5 数据属性，但由于它是一对一的，我只是给跨度一个 id log-{checkbox-id}，所以基本上：

$(".menu input:checkbox").on("click", function() {
    if ($(this).is(":checked")) {
        $("#textValue").text($(this).val());
        $("#log").append("<span id=\"log-" + this.id + "\">" + this.id + "</span><br/>");
    }
    else {
        $("#log-" + $(this).attr("id")).remove();
    }
});​

这是小提琴：http: //jsfiddle.net/crazytonyi/fLskG/7/

这样做的好处是您不必确认该值是否已经在列表中，因为它不会被选择器找到。我可能也会加强您如何进行插入和 HTML，但现在，我只想修改代码以显示 id 标记解决方案。

在这里，有点收紧：

$(".menu input:checkbox").on("click", function() {
    if ($(this).is(":checked")) {
        $("#textValue").text($(this).val());
        var $log_entry = $('<li>');
        $log_entry.attr("id", "log-" + this.id);
        $log_entry.text(this.id);
        $("#log").append($log_entry);
    }
    else {
        $("#log-" + $(this).attr("id")).remove();
    }
});​

请注意，日志现在ul不需要中断等，从而更容易添加 id 属性和文本。新演示：http: //jsfiddle.net/crazytonyi/fLskG/12/

于 2012-05-05T18:15:42.370 回答
1

而不是$("#log").children("span").contains($(this).attr("id"))使用$('#log span:contains("'+ this.id +'")').

$(document).ready(function() { $(".menu").find("input:checkbox").click(function() {

    if ($(this).is(":checked")) {
        $("#textValue").text($(this).val());
        $("#log").append("<span>" + this.id + "</span><br/>");
    }
    else {
        $('#log span:contains("'+ this.id +'")').next('br').andSelf().remove();
    }
});

});

演示

于 2012-05-05T18:00:50.760 回答