JQuery код не работает в Firefox или Chrome селектор значения соответствуют сценарию несоответствия - PullRequest
Новая
       28

JQuery код не работает в Firefox или Chrome селектор значения соответствуют сценарию несоответствия

0 голосов
/ 21 октября 2011

Эту часть кода помогли несколько человек. прекрасно работает в 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>

1 Ответ

0 голосов
/ 21 октября 2011

У меня нет ответа, но я нашел несколько странных отрывков в вашем коде.

Вы пишете это:

var selects = $ ('select', this); // select ALL select + элемент формы $ (выбирает) .each (function () {// цикл всех элементов

Почему вы добавляете текущую форму в выбранную коллекцию?

Почему вы используете операторы «равенство без приведения типов» (===)? Они необходимы?

Вы пытались отлаживать с помощью firefox «шаг за шагом»?

Почему бы вам не записать журнал в переменную или текстовое поле и сравнить результат с тем же кодом, выполненным в jsFiddle?

Надеюсь, это поможет.

...