Question

我正在为一个kiosk项目选择一个元素替换脚本，它接受一个元素并替换它，并且它是带有div的<options> s。我有两个版本 - <select>和<select[multiple="multiple"]>元素的“正常”和“模态”。各个替换人员彼此独立地工作。当我将所有这些放在页面上时，它们会在功能上断开。特别是，非模态<select>和非模态<select[multiple="multiple"]>都不会在单击各自的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。

<强>更新

给一个人一条鱼，他吃了一天......教一个人钓鱼，他吃了一辈子。尽管您的小提琴正在发生变化，但我使用谷歌Chrome开发工具进行了调试。只需转到您的小提琴，右键单击，然后选择Inspect Element。单击“脚本”选项卡，然后从下拉列表中选择“show /”脚本。然后，您可以单击行号以在javascript中设置断点。返回Chrome，在“结果”窗格中执行操作，Chrome应该会遇到断点。然后，您可以逐步执行操作，逐行查看DOM如何受脚本影响。

您需要在每个（）和click（）函数中设置断点，因为Chrome没有非常好的Step Into功能（它进入jquery源）。此外，使用2监视器显示有助于在这里进行操作，以便您可以在一台监视器上单步执行调试器，同时在另一台监视器中查看小提琴DOM结果。

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

1 个答案: