jQuery与表单选择元素替换冲突问题

Question

我正在为一个 kiosk 项目编写一个选择元素替换脚本，该脚本接受一个元素并替换它，它是带有 div 的 <options>s。我有两个版本 - <select> 和 <select[multiple="multiple"]> 元素的“正常”和“模态”。各个替代品彼此独立，可以按应有的方式工作。当我将它们全部放在一个页面上时，它们会在功能上中断。特别是，对于非模态的<select> 和非模态的<select[multiple="multiple"]>，当它们各自的div.options 被单击时，它们都不会切换类。我相信与导致问题的 jQuery 存在某种冲突，但我太新手了，无法弄清楚。

在我的代码中，您会注意到很多变量和添加 html 的实例，这似乎是不必要的。该脚本的目的是替换由表单生成器生成的表单元素，该表单生成器生成一个简单的标签且无法更改。

我已在此处包含我的代码：http://jsfiddle.net/zumwalt/52At7/

非常感谢任何帮助！

Answer 1

这是正在发生的事情：

 $('div.select-normal div.option-'+value+'').click(function() { 
     option.prop("selected", "selected");
     $('div.select-normal div.option').removeClass('selected');
     $(this).toggleClass('selected');
 });

当上面的代码为您的正常 select many 执行时，css 类被正确应用。但是，稍后您将获得用于模态选择许多的代码：

$('div.option').click(function() {
    var value = $(this).attr('id');
    var option = $('option[value=' + value + ']');
    var optiontext = $(this).text();

    option.prop("selected", !option.prop("selected"));
    $(this).toggleClass('selected'); // HERE IS THE ERROR
    if ($(this).hasClass('selected')) {
        $('ul.multiselect-dropdown-options')
            .append('<li id="' + value 
                + '" class="dropdown-option drop-down-option-' 
                + value + '">' + optiontext 
                + '<a class="remove-option">x</a></li>');
    } else {
        $('.drop-down-option-' + value).fadeOut().remove();
    }
});

由于单击正常的select many 也会触发$('div.option').click()，它正在执行toggleClass 并删除之前添加的'selected' 类。

顺便说一句，如果您正在使用它，则很难调试您的小提琴。向 SO 发布小提琴时，请发布您不会编辑的分叉 URL。

更新

给一个人一条鱼，他可以吃一天……教一个人钓鱼，他可以吃一辈子。尽管您的小提琴正在发生变化，但我还是使用 Google Chrome 开发者工具对其进行了调试。只需转到您的小提琴，右键单击，然后选择检查元素。单击脚本选项卡，然后从下拉列表中选择“显示/”脚本。然后，您可以单击行号以在 javascript 中设置断点。返回 Chrome，在 Result 窗格中执行一些操作，Chrome 应该会遇到断点。然后，您可以逐步执行这些操作，并逐行查看 DOM 是如何受脚本影响的。

您需要在 each() 和 click() 函数中设置断点，因为 Chrome 没有很好的 Step Into 功能（它会进入 jquery 源代码）。此外，拥有 2 台显示器的显示器在这里有很大帮助，这样您就可以在一台显示器上单步调试调试器，同时在另一台显示器上查看小提琴 DOM 结果。