HTML和JQuery内部的迭代器，用于初始化JQuery元素

Question

我在SemanticUI中使用了range元素。 像大多数SemanticUI元素一样，这些元素必须使用JQuery进行初始化。

这是我拥有的HTML代码：

$var_display = $_POST['display'];
$iterator = 0;
foreach ($var_display as $it) {
  $iterator += 1;
  echo '
    <span class="ui fluid large label">Range</span>
    <div class="ui divider"></div>
    <form class="ui form">
      <div class="field">
        <div class="fields">
          <div class="twelve wide field">
            <div class="ui blue range" id=#range-'.$iterator.'></div>
          </div>
          <div class="four wide field">
            <div class="ui input"><input type="text" id="input-'.$iterator.'"></div>
          </div>
        </div>
      </div>
    </form>
    <div class="ui divider"></div>
  ';
}

我需要使用foreach，因为用户可以通过复选框选择许多选项，并且根据选择的数量，我必须为每个选项创建一个范围。

此解决方案正在工作，我正在使用动态ID创建范围和输入。 现在，我需要在JQuery中创建一个foreach来初始化此元素。

我试图这样做：

$(document).ready(function(){
    for (var i = 0; i < 40; i++) {
      $('#range-'+i).range({
        min: 0,
        max: 10,
        start: 5,
        input: '#input-'+i
      });
    }
});

迭代器中的数字“ 40”只是一个随机数。

编辑 ：我尝试使用类进行设置，但是如果我在更改范围之一中的值时使用类而不是ID，那么其他所有范围也会更改。

Answer 1

那这个呢？ 无论如何，我认为您的PHP中有错误

<div class="ui blue range" id=#range-'.$iterator.'></div>

应该

<div class="ui blue range" id="range-'.$iterator.'"></div>

JS

$( "div[id^='range']" ).each(function(index){
   var range = $(this);
   var inputId = range.parent().next().find("input").attr("id");
   range.range({
    min: 0,
    max: 10,
    start: 5,
    input: inputId 
  });
});

这是一个小提琴==> https://jsfiddle.net/tonysamperi/n28w0gaq/

由于您现在已经输入了与范围匹配的输入ID，因此最好这样做：

$( "div[id^='range']" ).each(function(index){
   $(this).range({
    min: 0,
    max: 10,
    start: 5,
    input: "input-" + index 
  });
});