Question

假设我有两个由div容器分隔的区域，我需要在该容器中调用该函数时从本地发送不同区域的Id值。

提取：

   <script> 
       document.getElementById('compare_name").innerHTML = "Changed";
</script>

<div class = "details>

    <span id="compare_name">no1</span> 
    <form id="view-details0">
    <input type="button" value="Add to Compare" onclick="add_compare()">
    </form>
</div>

<div class  = "details">

<span id="compare_name">no2</span> 
    <form id="view-details0">
    <input type="button" value="Add to Compare" onclick="add_compare()">
    </form>
</div>

Answer 1

您不能对多个元素使用相同的ID。您可以使用名称，如下所示：

<script> 
       var x = document.getElementsByName("compare_name");
for(var i = 0; i < x.length ; i++){
x[i].innerHTML = "Changed";
                        }
</script>

<div class = "details>

    <span id="compare_name" name="compare_name">no1</span> 
    <form id="view-details0">
    <input type="button" value="Add to Compare" onclick="add_compare()">
    </form>
</div>

<div class  = "details">

<span id="compare_name" name="compare_name">no2</span> 
    <form id="view-details0">
    <input type="button" value="Add to Compare" onclick="add_compare()">
    </form>
</div>

Answer 2

正如其他人所指出的那样，要遵循这条规则，ID属性不应该重复，但如果你不依赖它就没关系。

我想提问者可能只需要更改被点击的div中的一个文本，而不是所有的跨度，所以只需稍加改动。

<html>
<head>
<title>Test</title>
<script>
function add_compare(el) {
    var divChildEles = el.parentNode.parentNode.childNodes;
    for (var i=0; i<divChildEles.length; i++) {
        if (divChildEles[i].nodeType==1 && divChildEles[i].nodeName=="SPAN") {
            //console.log(divChildEles[i].innerText);
            divChildEles[i].innerText='changed';
        }
    }
}

</script>
</head>

<body>
<div class = "details">
    <span id="compare_name">no1</span> 
    <form id="view-details0">
    <input type="button" value="Add to Compare" onclick="add_compare(this)">
    </form>
</div>

<div class  = "details">
    <span id="compare_name">no2</span> 
    <form id="view-details1">
    <input type="button" value="Add to Compare" onclick="add_compare(this)">
    </form>
</div>
</body>
</html>

Answer 3

JavaScript中的

id必须是唯一的。相反，你可以给他们一个同名的课程

<script> 
       var x=document.getElementByClassName('compare_name");
        for(var i=0;i<x.lengh;i++)
           x[i].innerHTML = "Changed"
</script>

<div class = "details>

    <span class="compare_name">no1</span> 
    <form id="view-details0">
    <input type="button" value="Add to Compare" onclick="add_compare()">
    </form>
</div>

<div class  = "details">

<span class="compare_name">no2</span> 
    <form id="view-details0">
    <input type="button" value="Add to Compare" onclick="add_compare()">
    </form>
</div>

JavaScript如何发送不同的实体但保持相同的ID？

3 个答案: