jQuery 代码在 firefox 或 chrome 选择器值匹配不匹配脚本中不起作用

Question

这段代码得到了一些人的帮助。在 jsFiddle 中工作得很好，但是当我尝试在本地针对一些实时代码运行它时，它失败了......我已经使用它 5 个小时了，我看不出可能缺少什么。我添加了 jquery 脚本、样式容器和表单/表结构。

<script type="text/javascript">
$(document).ready(function() {
"use strict";

$('#addForm').bind('change', function(evt) {
    $('td.mismatch', this).removeClass('mismatch');

    var selects = $('select', this);
    $(selects).each(function() {
        var that = this;
        $(selects).not(this).each(function() {

            // we have a similar select
            if ($(this).val() !== '' && $(this).val() === $(that).val()) {
                // now compare inputs
                var
                    thisInputs = $('#grouperCost , #casePackForGroups', $(this).closest('tr')),
                    thatInputs = $('#grouperCost , #casePackForGroups', $(that).closest('tr'));

                $(thisInputs).each(function(i) {
                    if ($(this).val() !== $(thatInputs).eq(i).val()) {
                        $(this).closest('td').addClass('mismatch');
                        $(thatInputs).eq(i).closest('td').addClass('mismatch');
                    }
                });
            }
        });
    });
});
}());
</script>

<style>.mismatch {background: #ff9999;}</style>

<form name="form1" ID="addForm" action="array_script.cfm">
<table>
<tr>
    <td>
        <select name="selectA">
            <option id="A" value="">None</option>
            <option id="A" value="A">A</option>
            <option id="A" value="B">B</option>
            <option id="A" value="C">C</option>
        </select>
    </td>
    <td>
        <input ID="grouperCost" type="text" name="price" value="8.99" />
    </td>
    <td>
        <input ID="casePackForGroups" type="text" name="perCase" value="4" />
    </td>
</tr>
<tr>
    <td>
        <select name="selectB">
            <option id="B" value="">None</option>
            <option id="B" value="A">A</option>
            <option id="B" value="B">B</option>
            <option id="B" value="C">C</option>
        </select>
    </td>
    <td>
        <input  ID="grouperCost" type="text" name="price" value="8.98" />
    </td>
    <td>
        <input  ID="casePackForGroups" type="text" name="perCase" value="5" />
    </td>
</tr>
<tr>
    <td>
        <select name="selectC">
            <option id="C" value="">None</option>
            <option id="C" value="A">A</option>
            <option id="C" value="B">B</option>
            <option id="C" value="C">C</option>
        </select>
    </td>
    <td>
        <input  ID="grouperCost" type="text" name="price" value="8.99" />
    </td>
    <td>
        <input  ID="casePackForGroups" type="text" name="perCase" value="4" />
    </td>
</tr>
</table>
</form>

Answer 1

我没有答案，但我在你的代码中发现了一些奇怪的段落。

你写这个：

    var selects = $('select', this);//选择所有 select + 表单元素
    $(selects).each(function() { //循环所有元素

为什么要将当前表单添加到 select 集合中？

为什么使用“不带类型强制的相等”(===) 运算符？它们有必要吗？

您是否尝试过使用 firefox 进行“逐步”调试？

为什么不在变量或文本框中写入日志并将结果与​​在 jsFiddle 上执行的相同代码进行比较？

希望它有帮助。