jQuery применяет скрипт к нескольким полям выбора - PullRequest
Новая
       7

jQuery применяет скрипт к нескольким полям выбора

0 голосов
/ 08 мая 2018

Я следовал этому уроку, который превращает блок выбора в ползунок на гравитационных формах с помощью пользовательского интерфейса jquery, и это работает, однако ...

https://jsfiddle.net/hirejordansmith/6rapbyn2/

У меня есть сотни блоков выбора, и мне нужно, чтобы все они работали правильно, поскольку учебник предназначен только для одного поля выбора на странице.

Если у вас есть несколько, это, кажется, добавить все поля выбора во все ползунки, какие-нибудь идеи, ребята?

Это ссылка, над которой я работаю: https://www.claims.co.uk/test123#gf_1

Чтобы попасть в раздел слайдера, выберите мужской> голова> «Повреждение зубов» + «Глухота» + «Эпилепсия», а затем нажмите «Далее», чтобы увидеть ползунки.

Это мой код: 

 jQuery(document).ready(function($) {

    function sliderTooltip( $select, index, $handle ) {

    var index    = Math.max( 0, index ),
        curValue = $selectDesktop.find('option').eq(index).text(),
        tooltip  = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';

    $handle.html(tooltip);

  }

  function sliderConditionalLogic( $select, index ) {
    var index  = Math.max( 0, index ),
        formId = $select.parents( 'form' ).attr( 'id' ).split( '_' )[1],
        $input = $( '#gform_next_button_' + formId + '_2' );
    if( index == 0 ) {
        $input.hide();
    } else {
        $input.show();
    }
  }

    var $selectDesktop = $(".claims-calculator .gfield_select");
    var $sliderDesktop = $("<div id='slider-desktop'></div>")
      .insertAfter($selectDesktop).slider({
        min: 1,
        max: $selectDesktop.find('option').length,
        range: "min",
        value: $selectDesktop[0].selectedIndex + 1,
        slide: function(event, ui) {
          $selectDesktop[0].selectedIndex = ui.value - 1;
          sliderTooltip( $selectDesktop, ui.value - 1, $( ui.handle ) );
          sliderConditionalLogic( $selectDesktop, ui.value - 1 );
        }
      });

    sliderTooltip( $selectDesktop, $selectDesktop[0].selectedIndex, $sliderDesktop.find('.ui-slider-handle' ) );
    sliderConditionalLogic( $selectDesktop, $selectDesktop[0].selectedIndex );

});

1 Ответ

0 голосов
/ 08 мая 2018

Чтобы ваш код работал только для одного блока выбора за раз, как вы хотите, вам фактически придется запускать его часть отдельно для каждого имеющегося блока выбора. Прямо сейчас вы выбираете все свои <select> здесь: 

var $selectDesktop = $(".claims-calculator .gfield_select");

Возможно, самый простой способ понять и сделать это - дублировать все после этой строки, чтобы у вас было 3 блока кода (по одному для каждого уникального <select>), но, конечно, это беспорядочно, поэтому вместо этого я рекомендую использовать jQuery Расширение .each и цикл по каждому из ваших элементов для запуска кода.

Вот код, который я предлагаю: 

$(".claims-calculator .gfield_select").each(function() {
  var $selectDesktop = $(this);
  var $sliderDesktop = $("<div id='slider-desktop'></div>").insertAfter($selectDesktop).slider({
    min: 1,
    max: $selectDesktop.find('option').length,
    range: "min",
    value: $selectDesktop[0].selectedIndex + 1,
    slide: function(event, ui) {
      $selectDesktop[0].selectedIndex = ui.value - 1;
      sliderTooltip($selectDesktop, ui.value - 1, $(ui.handle));
      sliderConditionalLogic($selectDesktop, ui.value - 1);
    }
  });

  sliderTooltip($selectDesktop, $selectDesktop[0].selectedIndex, $sliderDesktop.find('.ui-slider-handle'));
  sliderConditionalLogic($selectDesktop, $selectDesktop[0].selectedIndex);
});

Теперь это оставляет нам одну проблему, которую нужно решить: в вашей функции «sliderTooltip» у вас есть ссылка на «$ selectDesktop», в которой в моем цикле .each я создал экземплярную переменную (она каждый раз ссылается на <select>) это работает). Вам нужно вместо этого ссылаться на <select>, который актуален во время выполнения. Я рекомендую изменить правильную переменную, через которую ваш код уже проходит, под названием: "$ select", например, так: 

curValue = $select.find('option').eq(index).text(),
...