基於鍵值更改跨度文本

Question

我試圖更改頁面上具有與我正在使用的字段匹配的ID的標記的所有文本。

JS：

$("#name1").keyup(function() { 
    var val = $(this).val(); 
    $("#name2").html(val); 
}); 

$("#regard1").keyup(function() { 
    var val = $(this).val(); 
    $("#regard2").html(val); 
}); 

$("#code1").keyup(function() { 
    var val = $(this).val(); 
    $("#code2").html(val); 
}); 

HTML：

<input id="name1" type="text" placeholder="A" /> 

<input id="regard1" type="text" placeholder="B" /> 

<input id="code1" type="text" placeholder="C" /><br /> 

<span id="name2">1</span><br /> 
<span id="code2">2</span><br /> 
<span id="regard2">3</span><br /> 
<span id="name2">4</span><br /> 
<span id="code2">5</span><br /> 
<span id="regard2">6</span> 

但現在看來，只有第一個實例受到影響。我如何打所有的實例？

Answer 1

由於id在同一文檔中應該是唯一的，因此應該用classes替換重複的ids，代碼將起作用，請檢查工作示例。

希望這會有所幫助。

---

$("#name1").keyup(function() { 
 
    var val = $(this).val(); 
 
    $(".name2").html(val); 
 
}); 
 

 
$("#regard1").keyup(function() { 
 
    var val = $(this).val(); 
 
    $(".regard2").html(val); 
 
}); 
 

 
$("#code1").keyup(function() { 
 
    var val = $(this).val(); 
 
    $(".code2").html(val); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="name1" type="text" placeholder="A" /> 
 

 
<input id="regard1" type="text" placeholder="B" /> 
 

 
<input id="code1" type="text" placeholder="C" /><br /> 
 

 
<span class="name2">1</span><br /> 
 
<span class="code2">2</span><br /> 
 
<span class="regard2">3</span><br /> 
 
<span class="name2">4</span><br /> 
 
<span class="code2">5</span><br /> 
 
<span class="regard2">6</span>

Answer 2

在html中，id可以出現一次。所以，你不能有兩個具有相同ID的元素。要麼給這兩個元素每個唯一的ID或給他們相同的類名稱。