Question

尝试使用$(this).attr("id")创建if语句时遇到困难。我想要的是，当单击并选中复选框时，其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的span。

感谢。

Answer 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();
    }
});

}）;

<强> DEMO

Answer 2

请检查一下。我认为你必须只删除未经检查的复选框的跨度

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();
            }
        }
    });
});

Answer 3

你可以采用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/

如果span包含ID则

3 个答案: