Как создать связанное событиеHandlers в JQuery на повторяющихся группах элементов - PullRequest
Новая
       23

Как создать связанное событиеHandlers в JQuery на повторяющихся группах элементов

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

Я довольно новичок в JQuery, и это, вероятно, не лучший вариант использования для изучения, но это проект, который я должен сделать.

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

По существу: Список товаров -> Доступные размеры -> показать цену для выбранного размера

Это все довольно прямолинейно, и у меня есть кое-что, работающее для одного набора сгруппированных входов.

Но я застрял на том, как заставить это работать для 'N' экземпляров. Я использую индекс по идентификаторам элементов, чтобы сгруппировать связанные элементы (т.е. input_name_ [0 .. N]) и дать уникальные идентификаторы по всему документу.

HTML: 

<form ...>
  <fieldset>
     <select id="item_list_0" name="item_list_0">
        <option value=''>Select an Item</option>
     </select>
     <select id="size_0" name="size_0">
           <option value="">Select Size</option>
     </select>
     <input id="price_0" name="price_0" size="10" value="Unit Price" />
 </fieldset>

 <fieldset>
     ..... repeated with inputs named: input_name_1
 </fieldset>
 .
 .  <!-- up to N --> fieldsets -->
 .
 </form>

Сценарий JQuery, который работает для определенного идентификатора «set» (т. Е. Item_list_0) 

    <script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $("select#item_list_0").change(function(){
            $.getJSON(url,{data},
            function(json){
                var obj = json.pl.size;
                var options = '<option value="">Size</option>';
                for (var i = 0; i < obj.length; i++) {
                options += '<option value="' + i + '">' + obj[i] + '</option>';
              }
              $("select#size_0").html(options);
            });
          });

        $("select#size_0").change(function(){
            $.getJSON(url,{data},
            function(json){
                var price = json.pl.price;
                var size =  $("select#size_0").val();
                $("input#price_0").val(price[size]);
            });
        });

     }); // end ready function
    </script>

Для справки: JSON, возвращаемый из URL: 

{"pl":{"name":"item Name","price":["110.00","40.00","95.00"],"size":["LG","SM","MED"]}}

Мои проблемы: 1. Необходимо удалить определенный идентификатор в событиях .click, чтобы он был динамическим для всех 'N' наборов полей 2. Нужно сохранить отношения для цепей. (item_list_0.click НЕ должен влиять на список опций size_1)

Я посмотрел на плагин jquery.selectChain и плагин jquery.cascade, но ни один из них не подходит для моей конкретной ситуации.

1 Ответ

1 голос
/ 09 октября 2011

Примените класс к каждому из ваших select#item_list_N и select#size_N.Вы получите следующий HTML-код: 

<form>
    <fieldset>
        <select id="item_list_0" name="item_list_0" class="item_list">
            <option value=''>Select an Item</option>
        </select>
        <select id="size_0" name="size_0" class="size">
           <option value="">Select Size</option>
        </select>
        <input id="price_0" name="price_0" size="10" value="Unit Price" />
    </fieldset>

    <fieldset>
        <!-- repeated with inputs named: input_name_1 -->
    </fieldset>

    <!-- up to N fieldsets -->

</form>

Затем вы можете использовать универсальную функцию для обслуживания каждого отдельного экземпляра вашего набора полей.Вот черновик того, что я имею в виду: 

$(document).ready(function() {
    $(".item_list").change(function() {

        // Let's assume that you only need to retrieve
        // a unique number to identify the fieldset.
        var uniquePart = $(this).attr('id').replace(/\D/g, '');

        // This part left almost untouched
        $.getJSON(url, {data}, function(json) {
            var obj = json.pl.size,
                options = ['<option value="">Size</option>'];

            for (var i = 0, len = obj.length; i < len; i+= 1) {
                options.push('<option value="' + i + '">' + obj[i] + '</option>');
            }

            // Here we apply the id number
            $("#size_" + uniquePart).html(options.join(''));
        });
    });


    $(".size").change(function() {
        var $this = $(this),

            // Same idea here
            uniquePart = $this.attr('id').replace(/\D/g, ''),
            size = $this.val();

        $.getJSON(url, {data}, function(json) {
            var price = json.pl.price,

            // By the way, ID selectors are told
            // to be more efficient without specifying a tag
            $("#price_" + uniquePart).val(price[size]);
        });
    });

}); // end ready function
...