javascript - HTML 和 JQuery 中的迭代器用于初始化 JQuery 元素

Question

我在 SemanticUI 中使用范围元素。与大多数 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 
  });
});

这是一个 fiddle ==> https://jsfiddle.net/tonysamperi/n28w0gaq/

既然你现在已经有了与范围匹配的输入id，那么最好是这样:

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