Question

let data = ["lorem", "ipsum", "dolor"];

$('input').each(function(){
  let x = $(this).attr('data-x');
  $(this).val(data[x]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type='text' class='einp' data-x = 0>
<input type='text' class='einp' data-x = 1>
<input type='text' class='einp' data-x = 2>

是否可以没有each循环？

类似：

$('input[data-x=?').val(data[?]);

Answer 1

否，.val()无法做到。通过选择多个输入并在jQuery对象上设置值，您将对整个元素集合应用相同的值。

如果您要单行处理，可以这样做

$('input').each(function() {
  $(this).val(data[ $(this).attr('data-x') ]);
});

如果使用箭头功能

$('input').each( item => $(item).val(data[ $(item).attr('data-x') ]) );

Answer 2

可能是这样吗？

let data = ["lorem", "ipsum", "dolor"];
data.forEach((d, i) => {
  $(`input[data-x=${i}]`).val(d);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type='text' class='einp' data-x=0>
<input type='text' class='einp' data-x=1>
<input type='text' class='einp' data-x=2>

Answer 3

您可以将jQuery.fn.val与功能配合使用。只需使用$html = preg_replace('/\sstyle=("|\').*?("|\')/i', '', $html);的值访问数据数组中的元素并返回它。请注意，它仍然隐式使用循环。

data-x

let data = ["lorem", "ipsum", "dolor"];

$("input").val(function () {
  return data[this.dataset.x];
});

Answer 4

尽管您可以优化代码，但也不能没有循环：

let data = ["lorem", "ipsum", "dolor"];
data.forEach((d,i) => $('input').eq(i).val(d));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type='text' class='einp' data-x = 0>
<input type='text' class='einp' data-x = 1>
<input type='text' class='einp' data-x = 2>

Answer 5

您可以使用简单的数据绑定库，例如knockoutjs

如果您担心添加其他库，并且还具有JavaScript技能，则只需使用Google data binding in javascript。你可以找到很多文章

基本上，您有一个为每个文本框定义了属性的对象，并且getter和setter将与textbox事件绑定。这样您就可以拥有简单的双向数据绑定机制。

在没有每个循环的情况下模拟输入值

5 个答案: