Question

我只是想问一下，如果我们有多个具有相同ID的div，我们怎样才能使用javascript显示它们？

我试过了：

<script>
function filterfunc() { 
if(document.getElementById('filter_deductible').value == 'id_50'){

document.getElementById('id_0').style.display = 'none';

document.getElementById('id_50').style.display = 'block';
}
}
</script>

这是我的html div具有相同的ID：

<div id="id_0">0</div>
<div id="id_0">0</div>
<div id="id_50">50</div>

但是它只隐藏了一个id id_0的div而不是所有具有id_0

的div

请提出任何建议

Answer 1

Id必须是唯一的，您应该使用类，

<div class="id_0">0</div>
<div class="id_0">0</div>
<div class="id_50">50</div>

隐藏所有id_0使用

function filterfunc() { 
    if($('#filter_deductible').val() == 'id_50'){
       $('div.id_0').hide();
       $('div.id_50').show();
    }
}

Answer 2

如果有多个元素，你应该使用一个类。或者使用不同的ID。

Ids应该是独一无二的。

<script>
function filterfunc() { 
if(document.getElementById('filter_deductible').value == 'id_50'){

$('.id_0').css("display","none")

$('.id_50').css("display","block")
}
}
</script>


<div class="id_0">0</div>
<div class="id_0">0</div>
<div class="id_50">50</div>

或者

 <script>
    function filterfunc() { 
    if(document.getElementById('filter_deductible').value == 'id_50'){

    $('.id_0').hide()

    $('.id_50').css("display","block")
    }
    }
    </script>


    <div class="id_0">0</div>
    <div class="id_0">0</div>
    <div class="id_50">50</div>

Answer 3

不执行此操作。具有相同ID的多个元素会导致未定义的行为。如果需要将信息附加到球机节点，请使用数据属性或类。请注意getElementById是如何形成单数形式的？它只期望选择并返回一个元素。

话虽如此，你可以侥幸逃脱

document.querySelectorAll("#id_0")

Answer 4

如果你想在dom元素上使用javascript函数，你必须使用class not id属性。

id属性在整个html文档中是唯一的。

尝试使用jquery。

$.(document).ready(function(){
   $("#filter_deductible").change(function(){
       var $this = $(this); //instance of element where was changed value
       if($this.val() == 'id_50'){
           $(".id_0").hide();
           $(".id_50").show();
       }
   });
});

你的文档html应该是这样的。

<div class="id_0">0</div>
<div class="id_0">0</div>
<div class="id_50">50</div>

只有在标记内包含jquery库时才会有效。而你的dom元素#filter_deductible允许更改事件触发器。

希望我帮助你

Answer 5

在这种情况下使用类ID是唯一的。

<div class="zero">0</div>
<div class="zero">0</div>
<div class="class_50">50</div>

你可以使用jQuery：

$('.zero').hide();
$('.class_50').show();

Answer 6

使用jQuery就像

一样简单

<强> HTML

<select name="filter_deductible" id="filter_deductible">
    <option value="id_0">0</option>
    <option value="id_50">50</option>
</select>
<div id="id_0">0</div>
<div id="id_0">0</div>
<div id="id_50">50</div>

<强>的jQuery

$("#filter_deductible").change(function(){
  if($(this).val()=="id_50")
  {
    $('[id="id_0"]').hide();
  }
});

<强> Demo

Answer 7

HTML规范要求ID属性在页面中是唯一的：

如果你想拥有几个具有相同ID的元素，你的代码将无法工作，因为方法getElementByID只返回一个值，而ID需要是唯一的。如果您有两个具有相同值的ID，那么您的HTML无效。

你想要做的是使用div class =“id_0”并使用方法getElementsByClassName，因为这会返回一个元素数组

function filterFunc() {
    var n = document.getElementsByClassName("id_0");
    var a = [];
    var i;
    while(n) {
        // Do whatever you want to do with the Element
        // This returns as many Elements that exist with this class name so `enter code here`you can set each value as       visible.
    }   

}

将javascript函数应用于相同的ID

7 个答案: