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

If removeClass doesn't affect source code, what's the point?

本文关键字：什么 removeClass 影响 源代码 如果      更新时间：2023-09-26

我有一堆具有这种模式的表单：

<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有什么意义吗？

有什么解决方法吗？

据我所知，问题是您阻止了提交单击操作的默认处理（即提交表单），但从您的描述来看，您实际上希望发生默认操作。这有点令人困惑，但我认为您希望动态更改行为，具体取决于提交按钮上是否有该类。

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

我假设您要附加单击处理程序以提交具有任何form标签中包含的effect类的按钮，并且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
    });
});

这在引擎盖下的作用：

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

你说：

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

但是，源代码不受影响，并且仍然显示它包含效果类。

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

相关文章：