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

尝试使其动态。使用Availability

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>

Answer 2

递增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>

如何为多个系列ID为其依赖ID系列编写单个jquery函数？

2 个答案: