jQuery/javascript: как отличить разные строки таблицы от одного и того же процентного селектора?

Question

Этот фрагмент создан N раз в строки таблицы/ячейки тд таблицы в HTML-структуры, вставив его в DOM с помощью кода JavaScript:

<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

Упрощение его с атрибутами данных и не используя идентификатор. Ввод - это родной брат.

$("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>

Answer 2

У вас есть несколько вопросов 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") 
});