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

Question

我正在为一个信息亭项目编写一个选择元素替换脚本，该脚本采用一个元素并替换它，它是带有 div 的 。我有两个版本 - 和 元素的“正常”和“模态”。各个替代品彼此独立地按其应有的方式工作。当我将它们全部放在一个页面上时，它们的功能就会中断。特别是，对于非模态 和非模态 来说，当它们的单击相应的 div.option。我相信与 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');
 });

当上面的代码为您的正常选择执行时，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();
    }
});

由于单击正常的选择多也会触发 $('div.option').click()，因此它正在执行toggleClass 并删除之前的“selected”类之前添加。

顺便说一句，如果你正在处理你的小提琴，那么调试它是非常困难的。当向 SO 发布小提琴时，请发布一个您不会编辑的分叉 URL。

更新

授人以鱼，可食一日……授人以鱼，可食一生。尽管你的小提琴正在改变，但我使用 Google Chrome 开发者工具对此进行了调试。只需转到您的小提琴，右键单击，然后选择“检查元素”。单击“脚本”选项卡，然后从下拉列表中选择“show/”脚本。然后，您可以单击行号以在 javascript 中设置断点。返回 Chrome，在结果窗格中执行某些操作，Chrome 应该会遇到断点。然后，您可以逐步执行操作并逐行查看脚本如何影响 DOM。

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