Question

我知道这里的问题是因为它们都为输入和div共享相同的id。有没有办法指定特定div的id点击，如＃34;这＆＃34;。我的代码中没有多个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>

Answer 1

直接来自HTML5规范：

id属性指定其元素的唯一标识符（ID）。该值必须在元素的主子树中的所有ID中唯一，并且必须至少包含一个字符。该值不得包含任何空格字符。

元素的唯一标识符可用于各种目的，最明显的是作为使用片段标识符链接到文档的特定部分的方法，作为在编写脚本时定位元素的方法，以及作为样式的方式来自CSS的特定元素。

一种可能的解决方案是将其更改为类，然后使用以下命名法在CSS或JS中进行定位：

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

这将针对任何以defInput开头的类 -

Answer 2

您可以使用类名而不是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中的节点的任何其他方法。

Answer 3

该值必须在元素的主子树中的所有ID中唯一，并且必须至少包含一个字符。 W3C HTML 5.1 topic 3.2.5.1. The id attribute

更新document.getElementById以获取不同div中的相同ID名称

3 个答案: