Question

我目前得到的是一个问题，我想改变id与输入类型匹配的每个元素值。请看看我的jsFiddle，这应该为你清理很多。问题是这些值不会改变所有输入类型，只会改变该id的第一个输入类型。尝试使用.each功能，但没有帮助。

HTML

<input type="text" id="first" value="tesdafsdf" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />

Jquery的

$('#first').keyup(function() {
    updateSearch();
});

var updateSearch = function() {
    $('#second').each(function(index, value) {
        this.value = $('#first').val();
    });
};

//Change the values for testing purpose
updateSearch();

http://jsfiddle.net/ZLr9N/377/

Answer 1

ID用于唯一标识元素，因此元素的ID必须是唯一的。

它必须在文档中是唯一的，并且通常用于检索元素使用getElementById。 id的其他常见用法包括使用使用ID as a selector为文档设置样式时元素的CSS。

当你必须对多个元素进行分组时，最简单的方法之一就是使用class属性。

当您使用id选择器时，它将仅返回与ID匹配的第一个元素，其余元素将被忽略。

所以

＆＃13;

$('.first').keyup(function() {
  updateSearch();
});

var updateSearch = function() {
  $('.second').val($('.first').val());
};

//Change the values for testing purpose
updateSearch();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="first" value="tesdafsdf" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />

＆＃13;

Answer 2

不幸的是，HTML元素ID需要不同，它们应该是唯一标识符。但是，类可以应用于多个元素，如：

<强> HTML

<input type="text" id="first" value="tesdafsdf" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />
<input type="text" class="second" />

<强>的Javascript

$('#first').keyup(function() {
    updateSearch();
});

var updateSearch = function() {
    $('.second').each(function(index, value) {
        this.value = $('#first').val();
    });
};

//Change the values for testing purpose
updateSearch();

Answer 3

使用以下代码通过ID属性设置字段的值

$(document).ready(function() {
$("[id='second']").each(function(){
      $(this).val('test');
})
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<input type="text" id="first" value="tesdafsdf" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />
<input type="text" id="second" />

更改具有相同ID的输入类型的所有值

3 个答案: