Question

我有这种模式的一堆表格：

<form action="/go/special" method="POST" target="_blank">
<input name="a" type="hidden" value="something"/>
<input type="submit" class="general effect" value="click me"></form>

对于每个在其操作中都有special的表单，我想使用此jQuery代码删除effect类：

<script src="/js/colorbox.js"></script>

<script>
jQuery(function($) {
    // find all forms that have "special" in the action, find their input, and add the class
    $('form[action*="special"] input[type="submit"]').removeClass('effect');
});
</script>

修改

effect课程代码：

(jQuery, document, window), $(document).ready(function() {
    $(".effect").click(function(t) {
        t.preventDefault();
        var e = $(this).closest("form");
        return $.colorbox({
            href: e.attr("action"),
            transition: "elastic",
            overlayClose: !1,
            maxWidth: $("html").hasClass("ie7") ? "45%" : "false",
            opacity: .8,
            data: {
                ago: e.find('input[name="a"]').val(),
            }
        }), !1
    })

链接到其余的Colorbox代码：

https://github.com/jackmoore/colorbox/blob/master/jquery.colorbox.js

effect类是Colorbox插件。如果存在，表单将在与模态窗口相同的窗口中打开。如果没有，表单将在新选项卡中打开。

该脚本确实删除了effect类，但只有在用我的控制台检查元素时才能看到它被删除。

然而，源代码没有受到影响，仍然显示它包含effect类。

因此，当我提交表单时，它将使用colorbox插件并打开一个模态窗口，而不是新标签。

首先使用removeClass是否有任何意义？

有没有解决办法？

Answer 1

我可以看到的问题是，您是否阻止了提交点击操作的默认处理（即提交表单），但是根据您的描述，您似乎确实需要默认操作即将发生。这有点令人困惑，但我认为你想要动态地改变行为，这取决于你是否在提交按钮上有这个类。

这是Event Delegation的完美案例。从某种意义上说，事件委托是一种将事件处理程序附加到与现在或将来的条件匹配的元素的方法，其中条件将在事件发生时进行评估，而不是在附加时进行评估。

我假设您要附加点击处理程序以提交包含在effect标记中的form类的按钮，并且form标记已存在于附件（页面加载）。

$(function() {
    $("form").on("click", "input[type='submit'].effect", function(t) {
        t.preventDefault();
        var e = $(this).closest("form");
        return $.colorbox({
            href: e.attr("action"),
            transition: "elastic",
            overlayClose: !1,
            maxWidth: $("html").hasClass("ie7") ? "45%" : "false",
            opacity: .8,
            data: {
                ago: e.find('input[name="a"]').val(),
            }
        }), !1
    });
});

这是做什么的，在引擎盖下：

查找所有form元素
将click处理程序附加到其中每一个，另外向其添加input[type='submit'].effect选择器
当点击事件冒泡DOM树并到达form元素时，会检查其来源以查看它是否与该附加选择器匹配。
如果匹配，则执行事件处理程序。它会阻止默认操作（提交表单）并启动颜色框。
如果它不匹配，它会继续冒泡，最终触发默认操作（表单提交）。

Answer 2

你说：

该脚本确实删除了效果类，但只有在用我的控制台检查元素时才能看到它被删除。

然而，源代码没有受到影响，仍然显示它包含效果类。

该课程正在删除。这就是您在检查元素时可以看到它被删除的原因。我猜你什么时候说'源代码＆＃34;您指的是右键单击选项＆＃34;查看源。＆＃34;当您查看源代码时，您正在查看浏览器在运行任何javascript之前加载的原始代码。因此，javascript对页面所做的任何修改都不会显示在视图源选项中。您只会在浏览器的开发工具中看到更改。

如果removeClass不影响源代码，那有什么意义呢？

2 个答案: