更新document.getElementById爲不同的div中相同的id名稱

-1

我知道這裏的問題是因爲他們都共享輸入和div的相同ID。有沒有一種方法可以指定特定div的id，例如「this」。沒有在我的代碼更新document.getElementById爲不同的div中相同的id名稱

<!DOCTYPE html> 
<html> 

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script> 
    $(document).ready(function() { 

     $(this).on("click", ".descrip", function() { 
     $(this).next('.def').slideToggle("slow"); 
     }); 



    }); 

    function addDef() { 
     //window.alert (1); 
     var def = document.getElementById("defInput").value; 
     //window.alert (def); 

     document.getElementById("addf").innerHTML += "<div class= 'descrip'> descrip </div>"; 
     document.getElementById("addf").innerHTML += "<div class= 'def'> " + def + " </div>"; 

    } 
    </script> 
</head> 

<body> 

    <div class="descrip"></div> 
    <div class="def"></div> 
    enter def for apple: 
    <input type="text" id="defInput"> 
    <br> 
    <br> 

    <button onclick="addDef()">ADD</button> 
    <div id="addf"></div> 


    <div class="descrip"></div> 
    <div class="def"></div> 
    enter def for orange: 
    <input type="text" id="defInput"> 
    <br> 
    <br> 

    <button onclick="addDef()">ADD</button> 
    <div id="addf"></div> 

</body> 

</html>

來源

2016-04-26 CS Student

_Identifiers in HTML must be unique_您的HTML無效。 – Satpal

如果您想要腳本與它們一起工作，則ID必須是唯一的。故事結局。 –

而不是ID，你應該使用name =''或有一個類。 HTML中的ID應該是唯一的。 –

該值在元素的主子樹中的所有ID中必須是唯一的，並且必須至少包含一個字符。 W3C HTML 5.1 topic 3.2.5.1. The id attribute

來源

2016-04-26 15:47:40

從HTML5規格

直接具有多個ID：

id屬性指定其元素的唯一標識符（ID）。該值在元素的主子樹中的所有ID中必須是唯一的，並且必須至少包含一個字符。該值不能包含任何空格字符。

元素的唯一標識符可以用於多種用途，特別是作爲使用片段標識符鏈接到文檔的特定部分的一種方式，作爲在腳本編寫時定位元素的一種方式，以及作爲樣式來自CSS的特定元素。

一個可能的解決方案是將其更改爲一個類，然後使用下列術語在你的CSS或JS目標：

[class^="defInput-"], [class*=" defInput-"] {}

這會指定用defInput-

來源

2016-04-26 15:42:01

開頭的任何類都可以你使用類名而不是id，然後用document.getElementsByClassName代替？

<button onclick="addDef('addf-1')">ADD</button> 
    <div class="addf-1"></div> 


    <div class="descrip"></div> 
    <div class="def"></div> 
    enter def for orange: 
    <input type="text" id="defInput"> 
    <br> 
    <br> 

    <button onclick="addDef('addf-2')">ADD</button> 
    <div class="addf-2"></div>

然後在你的函數：

function addDef(className) { 
     //window.alert (1); 
     var def = document.getElementById("defInput").value; 
     //window.alert (def); 

     document.getElementsByClassName(className)[0].innerHTML += "<div class= 'descrip'> descrip </div>"; 
     document.getElementsByClassName(className)[0].innerHTML += "<div class= 'def'> " + def + " </div>"; 

    }

注：我不提倡這種方法，但是這是一個簡單的解決您的問題。我假設您沒有意識到除了getElementById之外，還有任何其他方式來檢索DOM中的節點。

來源

2016-04-26 15:43:12 chrisd1100

更新document.getElementById爲不同的div中相同的id名稱

回答

相關問題