update document.getElementById für denselben ID-Namen in verschiedenen div

-1

Ich weiß das Problem hier ist, weil sie beide die gleiche ID für die Eingabe und für div teilen. gibt es eine Möglichkeit, die ID des bestimmten divs anzugeben, der wie "this" geklickt wurde. ohneupdate document.getElementById für denselben ID-Namen in verschiedenen div

mehrere IDs in meinen Code mit

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

Quelle

2016-04-26 CS Student

_Identifier in HTML müssen eindeutig sein_ Ihr HTML ist ungültig. – Satpal

IDs müssen eindeutig sein, wenn Skripts mit ihnen arbeiten sollen. Ende der Geschichte. –

Anstelle von ID sollten Sie name = 'oder eine Klasse verwenden. IDs in HTML sollten eindeutig sein. –

Der Wert muss unter allen IDs im Home-Teilbaum des Elements eindeutig sein und mindestens ein Zeichen enthalten. W3C HTML 5.1 topic 3.2.5.1. The id attribute

Quelle

2016-04-26 15:47:40

Direkt von HTML5 Spec:

Das id-Attribut gibt die eindeutige Kennung sein Element (ID). Der Wert muss unter allen IDs im Home-Teilbaum des Elements eindeutig sein und mindestens ein Zeichen enthalten. Der Wert darf keine Leerzeichen enthalten.

Die eindeutige Kennung eines Elements kann für eine Vielzahl von Zwecken verwendet werden, insbesondere als Verknüpfung mit bestimmten Teilen eines Dokuments mithilfe von Fragmentbezeichnern, um ein Element beim Scripting anzusteuern und als Stilvorlage ein spezifisches Element von CSS.

Eine mögliche Lösung ist es zu einer Klasse zu ändern und dann die folgenden Nomenklatur verwendet in Ihrem CSS oder JS Ziel:

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

Diese jede Klasse Ziel wird, die mit defInput- beginnt

Quelle

2016-04-26 15:42:01

Could Sie verwenden Klassennamen anstelle einer ID und verwenden stattdessen 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>

Dann in Ihrer Funktion:

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

    }

Hinweis: Ich bin nicht diese Methode befürworten, aber dies ist eine einfache Lösung für Ihr Problem. Ich mache die Annahme, dass Sie sich der Existenz einer anderen Möglichkeit nicht bewusst waren, einen Knoten im DOM neben getElementById abzurufen.

Quelle

2016-04-26 15:43:12 chrisd1100

update document.getElementById für denselben ID-Namen in verschiedenen div

Antwort

Verwandte Themen