update document.getElementById для одного и того же имени id в разных div

-1

Я знаю, что проблема заключается в том, что они оба используют один и тот же идентификатор для ввода и для div. есть ли способ указать идентификатор конкретного div, нажатого как «this». не имея несколько идентификаторов в моем кодеupdate document.getElementById для одного и того же имени id в разных div

<!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 должен быть уникальным, если вы хотите, чтобы скрипты работали с ними. Конец истории. –

Вместо идентификатора вы должны использовать name = '' или иметь класс. Идентификаторы в HTML должны быть уникальными. –

Значение должно быть уникальным среди всех идентификаторов в домашнем поддереве элемента и должно содержать как минимум один символ. W3C HTML 5.1 topic 3.2.5.1. The id attribute

источник

2016-04-26 15:47:40

Непосредственно из HTML5 Spec:

атрибут

Идентификатор определяет уникальный идентификатор своего элемента (ID). Значение должно быть уникальным среди всех идентификаторов в домашнем поддереве элемента и должно содержать как минимум один символ. Значение не должно содержать пробелов.

Уникальный идентификатор элемента может использоваться для различных целей, прежде всего как способ ссылки на определенные части документа с использованием идентификаторов фрагментов, как способ нацеливания элемента при написании сценариев и как способ стиля конкретный элемент из CSS.

Возможное решение изменить его к классу, а затем использовать следующую номенклатуру для цели в вашем CSS или JS:

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

Это цель любой класс, который начинается с defInput-

источник

2016-04-26 15:42:01

Могли вы используете имена классов, а не идентификатор, а вместо этого используете 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>"; 

    }

Примечание: Я не сторонник этого метода, но это легко исправить к вашему вопросу. Я делаю предположение, что вы не знали о существовании другого способа получить узел в DOM, кроме getElementById.

источник

2016-04-26 15:43:12 chrisd1100

update document.getElementById для одного и того же имени id в разных div

ответ

Смежные вопросы