異なるdiv内の同じID名のdocument.getElementByIdを更新します

-1

私は入力とdivの両方が同じIDを共有しているため、ここでの問題が分かります。 "this"のようにクリックされた特定のdivのIDを指定する方法はありますか？私のコードで複数のID HTML5仕様から直接異なるdiv内の同じID名のdocument.getElementByIdを更新します

<!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

_ HTML内の識別子は一意である必要があります_あなたのHTMLは無効です。 – Satpal

idをスクリプトと連動させるには、idを一意にする必要があります。物語の終わり。 –

IDの代わりに、name = ''を使用するか、クラスを持つ必要があります。 HTML内のIDは一意である必要があります。 –

値は、要素のホームサブツリー内のすべてのIDの間で一意でなければならず、少なくとも1文字を含む必要があります。 W3C HTML 5.1 topic 3.2.5.1. The id attribute

出典

2016-04-26 15:47:40

なくても：

をid属性は、その要素の一意の識別子（ID）を指定します。この値は、要素のホームサブツリー内のすべてのIDの中で一意でなければならず、少なくとも1つの文字を含んでいなければなりません。値にはスペース文字を使用できません。

要素の一意の識別子は、さまざまな目的で使用できます。特に、フラグメント識別子を使用してドキュメントの特定の部分にリンクする方法、スクリプト作成時に要素をターゲットにする方法、スタイルを設定する方法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

異なるdiv内の同じID名のdocument.getElementByIdを更新します

答えて

関連する問題