将 javascript 函数应用于相同的 id

Apply javascript function to same ids

本文关键字：id 应用于 javascript 函数      更新时间：2023-09-26

我只想问一下，如果我们有多个具有相同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>

这是我具有相同 id 的 htmldiv：

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

但它只隐藏了一个 id id_0div，而不是所有div 都有id_0

请提出任何建议

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();
    }
}

使用 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();
  }
});

演示

你应该

使用一个类，以防有多个元素。或者使用不同的 ID。

ID 应该是唯一的。

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

不要这样做。具有相同 id 的多个元素会导致未定义的行为。如果需要将信息附加到圆顶节点，请使用数据属性或类。注意到单数形式有多getElementById吗？它只期望选择并返回一个元素。

话虽如此，您可能可以侥幸逃脱

document.querySelectorAll("#id_0")

如果你想在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 允许更改事件触发器。

希望我能帮到你

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

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

你可以使用 jQuery：

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

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.
    }   
}
相关文章：