Как я могу написать одну функцию jquery для нескольких серий идентификаторов для их серии зависимых идентификаторов?

Question

Я написал код ниже, используя цикл while, напечатанный, как показано ниже

<p>

<input id="txtBox<?php echo $a; ?>" type="text" value="1" style="display:none;" />

<span id="txtBoxValue<?php echo $a; ?>">1</span>

</p>

, когда я нажимаю или выбираю интервал, мне нужно преобразовать его в текстовое поле, а после отмены выбора он снова вернется к тексту интервала

для этой задачи я написал несколько функций jquery, но мне нужно, чтобы это была одна функция, возможно ли это?

Заранее спасибо

<script> 
    $(function() {

    $('#txtBoxValue1').on('click', function() {
        $(this).hide(); 
        $('#txtBox1').show(); 
    });

    $('#txtBox1').on('blur', function() {
        var that = $(this);
        $('#txtBoxValue1').text(that.val()).show(); 
        that.hide(); 
    });


    $('#txtBoxValue2').on('click', function() {
        $(this).hide(); 
        $('#txtBox2').show(); 
    });

    $('#txtBox2').on('blur', function() {
        var that = $(this);
        $('#txtBoxValue2').text(that.val()).show(); 
        that.hide(); 
    });
});
</script>

Answer 1

Инкрементные id атрибуты являются антишаблоном, в основном потому, что они приводят к ненужной многословной логике JS.

Лучшее решение состоит в том, чтобы использовать общие классы для элемента с таким же поведением, а затем использовать обход DOM, чтобы связать элементы с окружающими их. Попробуйте это:

jQuery(function($) {
  $('.txtBoxValue').on('click', function() {
    $(this).hide().prev('input.txtBox').show();
  });

  $('.txtBox').on('blur', function() {
    var $that = $(this).hide();
    $that.next('.txtBoxValue').text($that.val()).show();
  });
});

.txtBox {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <input class="txtBox" type="text" value="1" />
  <span class="txtBoxValue">1</span>
</p>
<p>
  <input class="txtBox" type="text" value="2" />
  <span class="txtBoxValue">2</span>
</p>
<p>
  <input class="txtBox" type="text" value="3" />
  <span class="txtBoxValue">3</span>
</p>

Answer 2

Попробуйте сделать его динамичным. используйте class="textboxevent" data-id="<?php echo $a; ?>"

<p>
  <input class="textboxevent" id="txtBox<?php echo $a; ?>" data-id="<?php echo $a; ?>" type="text" value="1" style="display:none;" />    
  <span class="txtBoxValue<?php echo $a; ?>">1</span>
</p>

$(function() {    
  $('.textboxevent').on('click', function() {
    var id = $(this).data('id'); 
    $('#txtBox' + id).show(); 
  });

  $('.textboxevent').on('blur', function() {
    var that = $(this);
    var id = $(this).data('id');
    $('#txtBoxValue' + id).text(that.val()).show(); 
    that.hide(); 
  });       
});