Javascript Jquery委托方法应用程序

如何将.delegate方法应用于这一行jquery

$(function() {
    $("input[type='checkbox']").on('change', function() {
        if (this.checked) {
            $(".loadingItems").fadeIn(300);
            var color = encodeURI(this.value);
            $(".indexMain").load('indexMain.php?color=' + color, function() {
                $(".indexMain").fadeIn(slow);
            });
            $(".loadingItems").fadeOut(300);
        } else {
            $(".loadingItems").fadeIn(300);
            $(".indexMain").load('indexMain.php', function() {
                $(".loadingItems").fadeOut(300);
            });
        }
    });
});

表格：

我需要在复选框集中允许多个选择

$(document).on('change', 'input[type=checkbox]', function() {
   // code
});

使用jQuery可以做到这一点

.on（）

的语法：

---

其中，

static\u parent

表示

target

的非动态容器，

target

是绑定事件的元素。

委托可以按以下方式编写

$("table").delegate("td", "click", function(){$(this).toggleClass("chosen");});

在（）上使用最新版本（可从jquery 1.7获得）也可以实现同样的功能，如下所示

$("table").on("click", "td", function(){$(this).toggleClass("chosen");});

---

现在，您已经向我们展示了更多关于您真正想要做什么的内容，您必须更改代码的工作方式，

.delegate（）

对于解决该问题没有帮助

现在，在构建将与

indexMain.php

一起使用的URL时，只检查一个复选框的值。相反，在构建URL时，需要检查所有选中复选框的值

当选中多个复选框时，您不会说要如何构造URL，但从结构上看，代码将如下所示：

$(function() {
    $("input[type='checkbox']").on('change', function() {
        var colors = [];
        $("input[type='checkbox']:checked").each(function() {
            colors.push(this.value);
        });
        if (colors.length) {
            $(".loadingItems").fadeIn(300);
            $(".indexMain").load('indexMain.php?color=' + colors.join("+"), function() {
                $(".indexMain").fadeIn(slow);
            });
            $(".loadingItems").fadeOut(300);
        } else {
            $(".loadingItems").fadeIn(300);
            $(".indexMain").load('indexMain.php', function() {
                $(".loadingItems").fadeOut(300);
            });
        }
    });
});

当选择一种或多种颜色时，此代码将为

.load（）

命令生成如下URL：

indexMain.php?color=blue+yellow+green+orange

如果没有选择颜色，它将调用

indexMain.php

，而不使用其他参数

---

由您的服务器代码解析URL中的颜色并创建所需的响应。

当前代码无法解决的问题是什么？为什么要求使用

.delegate（）

？尝试允许多重选择。。。当前，当选中一个复选框时，我会获取我的第一个内容，然后选中另一个复选框不会将复选框1和2的结果合并在一起。。。只显示2您必须向我们显示更改处理程序中的代码。这显然就是问题所在。既然你已经给了我们一些关于你真正想做什么的想法，我在下面给出了一个答案。@user1545622-你真的在问这个问题吗？这是一个结构，您必须填写自己的逻辑来构建URL。您没有向我们提供足够的信息来了解您希望如何根据多个复选框的值构造

indexMain.php

的URL。根据你提供的信息，这是我们能提供的最多的了。如果您想全面描述您试图解决的问题，包括您正在使用的HTML和您试图生成的URL规范，我们可能会提供更多帮助。在那之前，这是我们能做的。我用额外的细节编辑了原始帖子，以防你可以看一下。。。谢谢@user1545622-当选中多个复选框时，在您向我展示PHP脚本的URL示例之前，我无法继续。我不懂PHP，所以提供PHP对我没有帮助。我需要知道URL应该是什么样子。基本上，它是从SQL表中检索的多个项目的列表。选择颜色后，PHP将接收颜色，然后执行新的SQL查询，并根据该颜色进行过滤。选中新复选框时，应发送另一种颜色，现在SQL查询将按2种颜色进行过滤。@user1545622-我认为解决此问题的正确方法是每次选中一个复选框时检查所有复选框，并向PHP脚本发送一个包含所有选定颜色的URL。然后，您可以使用该颜色列表来完成PHP脚本的工作。

$("table").on("click", "td", function(){$(this).toggleClass("chosen");});

$(function() {
    $("input[type='checkbox']").on('change', function() {
        var colors = [];
        $("input[type='checkbox']:checked").each(function() {
            colors.push(this.value);
        });
        if (colors.length) {
            $(".loadingItems").fadeIn(300);
            $(".indexMain").load('indexMain.php?color=' + colors.join("+"), function() {
                $(".indexMain").fadeIn(slow);
            });
            $(".loadingItems").fadeOut(300);
        } else {
            $(".loadingItems").fadeIn(300);
            $(".indexMain").load('indexMain.php', function() {
                $(".loadingItems").fadeOut(300);
            });
        }
    });
});

indexMain.php?color=blue+yellow+green+orange