jQuery 将脚本应用于多个 select 框

Question

我按照这里的教程使用 jquery UI 将 select 框变成重力形式的滑块并且它有效，但是...

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

我有 100 个 select 框，我需要它们都正常工作，因为本教程仅适用于页面上的一个 select 框。

如果您有多个似乎是将所有 select 框字段添加到所有滑块中，有什么想法吗？

这是我正在研究的link：https://www.claims.co.uk/test123#gf_1

要转到滑块部分 select male>head>"Damage to teeth"+"Deafness"+"Epilepsy" 然后按下一步查看滑块。

这是我的代码：

 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 );

});

Answer 1

要让您的代码一次只为一个 select 框工作，您实际上必须运行为每个 select 框单独设置一部分有。现在你 select 在这里 <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);
});

现在这给我们留下了 1 个问题需要解决：在你的 "sliderTooltip" 函数中你有一个对“$selectDesktop”的引用，在我的 .each 循环中我创建了一个实例变量（它每次运行s 引用不同的 <select>）。您需要它来引用执行时相关的 <select> 。我建议更改为您的代码已经通过管道传递的适当变量：“$select”，如下所示：

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

jQuery 将脚本应用于多个 select 框

jQuery applying script to multiple select boxes

javascript

jquery

gravity-forms-plugin