Question

我在这里遵循这个教程，使用jquery UI将选择框转换为重力形式的滑块，然而它可以正常工作......

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

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

如果你有多个似乎将所有选择框字段添加到所有滑块中，任何想法的家伙？

这是我正在处理的链接：https://www.claims.co.uk/test123#gf_1

要进入滑块部分，请选择男性＆gt;头部＆gt;“牙齿受损”+“耳聋”+“癫痫”然后按下一步以查看滑块。

这是我的代码：

 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>：

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(),

jQuery将脚本应用于多个选择框

1 个答案: