Question

我有空sendStatus[]。基本上我检查用户点击复选框时是否存在于数组上的值。如果那不是那里我只是添加“add + this.value”的值，以防用户再次点击复选框，

我正在检查sendStatus[]是否包含“add + this.value”如果存在我将其删除并添加新值“remove + this.value”，所以只有我会得到一个值在我的每个复选框中添加“添加+ this.value”或“删除+ this.value”。

这样做我使用了这个功能但不起作用：

var sendStatus = [];

var clearValues = function(newVal){
            console.log("calling",newVal);

        }

        $("form").on("click", ":checkbox", function(e){

            var el = $(this),parentClass = $(this).parent().hasClass("green"),label = $(this).parent();

            if(!parentClass){
                label.addClass("green");

                sendStatus = $.grep(sendStatus, function(value) {
                    return value != "remove" + el.val();
                });

                if ($.inArray("add" + el.val(), sendStatus) === -1) {
                    sendStatus.push("add" + el.val());
                }

            }else{
                label.toggleClass("red");

                sendStatus = $.grep(sendStatus, function(value) {
                    return value != "add" + el.val();
                });

                if ($.inArray("remove" + el.val(), sendStatus) === -1){
                    sendStatus.push("remove" + el.val());
                }
            }
        console.log(sendStatus);

        })

任何人都可以简化我的功能并突出我面临的问题..提前感谢。

Answer 1

我很确定问题出在：复选框选择器中。 console.log正在运行吗？无论如何，我认为更多的分配会使代码更清晰，错误更少。您可以尝试使用此示例实体http://jsfiddle.net/AyjnW/4/似乎正常工作。

$("form").on("click",'input[type="checkbox"]', function(e){

            var el = $(this),
                label = el.parent(), 
                hasParentClass = label.hasClass("green"),
                elementValue = el.val(),
                removeElementValue = "remove"+ elementValue,
                addElementValue = "add"+ elementValue ;
            if(! hasParentClass ){
                label.removeClass("red").addClass("green");

                sendStatus = $.grep(sendStatus, function(value) {
                    return value != removeElementValue ;
                });

                if ($.inArray(addElementValue , sendStatus) === -1) {
                    sendStatus.push( addElementValue );
                }

            }else{
                label.removeClass("green").addClass("red");

                sendStatus = $.grep(sendStatus, function(value) {
                    return value != addElementValue ;
                });

                if ($.inArray(removeElementValue , sendStatus) === -1){
                    sendStatus.push( removeElementValue );
                }
            }
            console.log(sendStatus);

        }) ;

Answer 2

小心.on() eventhandler，用法：

$("selector1").on("click",'selector2', function(e) {...

在selector1部分，您必须提供一个静态节点选择器，它不会在javascript运行时更改（来自Web服务器，或者它是静态的在html文档中。）将选择器写在最靠近dinamyc部分的位置。例如：$("form table > tbody > tr") selector2是选择的dinamyc部分，这些节点是在javascript运行时创建的，它们不在DOM中。所以写在这里你的复选框或td-s（如果你有，他们是dinamycally创建）。

$("form table > tbody > tr").on("click",'td > input[type="checkbox"]', function(e){ ...

jquery过滤器没有给出正确的结果

2 个答案: