jQuery меняет поля на подстроку связанного поля - PullRequest
Новая
       11

jQuery меняет поля на подстроку связанного поля

1 голос
/ 01 апреля 2010

Еще один вопрос расчета jquery.

У меня есть пример кода с сайта плагина, с которым я играю, чтобы заставить его работать: 

        function recalc(){
    $("[id^=total_item]").calc(
        "qty * price",
        {
        qty: $("input[name^=qty_item_]"), 
        price: $("input[name^=price_item_]"),
        },

        function (s){ return s.toFixed(2);},

        function ($this){ var sum = $this.sum();

            $("#grandTotal").val(
                // round the results to 2 digits
                sum.toFixed(2)
            );
        }
    );
}

Изменения в полях цены приводят к обновлению итогов: 

        $("input[name^=price_item_]").bind("keyup", recalc);
        recalc();

Проблема в том, что я не буду знать значения полей цены, они будут доступны мне только как подстрока значений, введенных пользователем, назовите это 'itemcode'. В зависимости от php-запроса будет изменяться количество элементов.

Я придумал это, чтобы изменить цену в зависимости от кода товара: 

    $("input[name^='itemcode_item_1']").keyup(function () {
    var codeprice = this.value.substring(2,6);
    $("input[name^='price_item_1']").val(codeprice);
});

$("input[name^='itemcode_item_2']").keyup(function () {
    var codeprice = this.value.substring(2,6);
    $("input[name^='price_item_2']").val(codeprice);
});

Однако, пока он делает это, он также останавливает обновление item_total. Кроме того, я чувствую, что должен быть способ не писать нумерованную функцию для каждого элемента в списке. Однако, когда я просто использую 

    $("input[name^='itemcode_item_']")

обновление любого поля кода товара обновляет все поля цены, что нехорошо.

Кто-нибудь может указать мне правильное направление? Я знаю, что я немного невежественен здесь, но любой мой javascript - это не мое.

Хорошо, обновите это сейчас, чтобы добавить HTML. По сути, сейчас это всего лишь небольшой пример с сайта калькулятора jquery, который я использую, чтобы получить функциональность прямо перед вставкой всего этого в действующий скрипт. В действительности количество элементов будет различным, и они будут сгруппированы различными способами. 

<table>

            <tr><th>Qty</th><th align="left"></th><th>Item code</th><th>Price</th><th>Total</th></tr>
            <tr>
            <td><input type="text" name="qty_item_1" id="qty_item_1" value="1" size="3"/></td>
            <td>Item One</td>
            <td><input type="text" id="itemcode_item_1" name="itemcode_item_1" value="" size="8" /></td>
            <td><input type="text" id="price_item_1" name="price_item_1" value="" size="8" /></td>
            <td><input type="text" id="total_item_1" value=" " size="8"  readonly="readonly"  /></td>

            </tr>

            <tr>
            <td><input type="text" name="qty_item_2" id="qty_item_2" value="1" size="3"/></td>
            <td>Item Two</td>
            <td><input type="text" id="itemcode_item_2" name="itemcode_item_2" value="" size="8" /></td>
            <td><input type="text" id="price_item_2" name="price_item_2" value="" size="8" /></td>
            <td><input type="text" id="total_item_2" value=" " size="8" readonly="readonly" /></td>
            </tr>
            <tr>
            <td colspan="4" align="right"><strong>Grand Total:</strong></td>
            <td><input type="text" id="grandTotal" value=" " size="6" readonly="readonly">    </td>
            </tr>
        </table>

Ответы [ 2 ]

1 голос
/ 01 апреля 2010

Вы писали, что элементы будут сгруппированы различными способами, но если этот шаблон всегда сохраняется (т.е. связанные поля находятся внутри одной строки): 

<tr>
  <td><input type="text" id="itemcode_item_1" name="itemcode_item_1" value="" size="8" /></td>
  <td><input type="text" id="price_item_1" name="price_item_1" value="" size="8" /></td>
</tr>

Вы можете получить свою функциональность следующим образом: 

$("input[name^='itemcode_item_']").keyup(function () {
    var codeprice = this.value.substring(2,6);
   // closest(sel) finds the closest ancestor that matches 'sel'
   // find(sel) finds  all descendants that match the selector 'sel'
   $(this).closest('tr').find("input[name^='price_item_']").val(codeprice);
});

В общем, попытайтесь выяснить разницу между полями itemcode_item_ и соответствующими им полями price_item_.
В этом случае они имеют общего предка tr, и внутри него есть только поле ввода price_item_. Другое отношение будет то, что price_item_1 является первым потомком следующего брата родителя itemcode_item_1.

1 голос
/ 01 апреля 2010

Я решил вторую проблему (итоги не обновляются) с этим, о чем я должен был подумать раньше: 

        $("input[name^=itemcode_item_]").bind("keyup", recalc);
        recalc();

Теперь просто, как это сделать, не повторяя функцию для каждого пронумерованного элемента.

...