jQuery / javascript：如何区分同一百分比选择器的不同表行？

Question

此片段在html结构中的表的表行/单元 td 中创建N次，方法是通过javascript代码将其插入DOM：

    <div class="noselect">
        <div class="class_innerPercentage clearfix">
           <label for="up"></label>
             <input id="input" type="number" min="0" max="100" step="5"
               value="100" class="noselect" readonly="readonly">
             </input>
           <label for="down"></label>
        </div>
    </div>

此插入由以下内容完成：

$("#id_createNewRow").click(function () {
    $('#start_bottom_line').before('<tr><td>....

最后我得到的结论是：

除了在DOM中插入外，还为每个新表行安装了一个事件侦听器：

    $("label[for=down],label[for=up]").on("click", function (event) {
        $("#input").val(function (_, n) {
            return event.target.htmlFor === "up"
                ? +n < +this.max ? +n + 5 : n
                : +n > +this.min ? +n - 5 : n;
        }).trigger("arrow")
    });

单击引用箭头向上/向下按钮时，只应对表中实际单击的行进行增加/减少。

目前只有第一个表格行增加/减少。

如何设法正确增加/减少当前点击的行？

Answer 1

您有几个HTML问题：

首先，请注意HTML <input>元素没有结束标记。删除</input>。

此外，许多浏览器都不支持type=number，并且会默认返回到没有任何箭头可点击的文本框。 See here for browser support

此外（最重要的是），如果您要重复创建相同的HTML代码段，那么您最终会看到包含id input的元素的每一行，所以当您的事件处理程序寻找它，它会一直停在它找到的第一个。

您需要确保插入的每个元素都获得唯一的id。

完成此操作后，可以更改事件处理程序以使用以下命令访问当前行：

$(".class_innerPercentage").on("click", "label[for=down],label[for=up]" , function (event) {
    var theInput = this.parentNode.querySelector("input");
    $(theInput).val(function (_, n) {
        return event.target.htmlFor === "up"
            ? +n < +this.max ? +n + 5 : n
            : +n > +this.min ? +n - 5 : n;
    }).trigger("arrow")
});

Answer 2

使用数据属性简化它，而不是使用id。输入是标签的兄弟。

$("label[data-dir]").on("click", function(e) {  //select the labels and bind click
  
  var label = $(this),  //label
      dir = label.data("dir"),  //get step direction to increase or decrease
      input = label.siblings("input"),  //find the input that is a sibling of the label
      step = Number(input.attr("step")),  //Get the step, no need to hard code it in the JavaScript
      min = Number(input.attr("min")),
      max = Number(input.attr("max")),
      updatedVal = Number(input.val()) + (dir*step); //change the value with the step size
  
  if (updatedVal>max) updatedVal = max;
  else if (updatedVal<min) updatedVal = min;

  input.val( updatedVal );  
  
  e.preventDefault();
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="noselect">
  <div class="class_innerPercentage clearfix">
    <label for="input1" data-dir="-1">-</label>
    <input id="input1" type="number" min="0" max="100" step="5" value="100" class="noselect" readonly="readonly">
    <label for="input1" data-dir="1">+</label>
  </div>
</div>