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，因为用户可以 select 多个带有复选框的选项，并且根据我必须为每个选项创建一个范围的选项数量。

此解决方案有效，我正在使用动态 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”只是一个随机数。

EDIT：我尝试使用 class 进行设置，但是如果我使用 class 而不是 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 
  });
});

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

Iterator inside HTML and JQuery for initializing a JQuery element

html

javascript

jquery

semantic-ui