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

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匹配的第一个元素其余元素将被忽略。

所以元素的

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

 
var updateSearch = function() { 
 
    $('.second').val($('.first').val()); 
 
}; 
 

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

<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" />

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();