Question

例如，我有这个功能。

function showprintdiv() {
    var x = document.getElementById('post-Print ');
    if (!x.style.display || x.style.display == 'block') {
        x.style.display = 'none';
    } else {
        x.style.display = 'block';
}

我有7次这个功能，8个部分有一个通过

生成的ID

<div id="post-<?php
    $posttags = get_the_tags();
    if ($posttags) {
        foreach($posttags as $tag) {
            echo $tag->name . ' '; 
        }
    }
?>" class="col-md-4 no-pad containerhover">

目前，当我点击一个按钮时，它会隐藏或显示后期打印的内容

我希望它隐藏/显示我所拥有的其他7个部分的内容，因此post-Print始终存在。

我认为应该有一些方法可以隐藏每个DIV与一个类，除非他们有指定的ID。

Answer 1

首先，HTML id属性应该not contain any spaces，因此您需要根据需要调整PHP代码。在以下工作之前有必要：

关注您的问题：如果您想要访问所有post-个元素，除了一个特定的元素post-Print，那么请使用querySelectorAll智能CSS选择器[id^=post-]:not(#post-Print)。

这是一个演示：

＆＃13;

function showprintdiv() {
    // Iterate over all elements that have an id that starts with "post-",
    // except the one you want to keep visible:
    var elems = document.querySelectorAll('[id^=post-]:not(#post-Print)');
    Array.from(elems, function (x) {
        if (x.id == 'post-Print') return; // don't touch this one.
        x.style.display = (!x.style.display || x.style.display == 'block')
            ? 'none' : 'block';
    });
}

// Demo: toggle visibility every half second:
setInterval(showprintdiv,  500);

＆＃13;

<div id="post-Print" class="col-md-4 no-pad containerhover">post-Print</div>
<div id="post-1"     class="col-md-4 no-pad containerhover">post-1</div>
<div id="post-2"     class="col-md-4 no-pad containerhover">post-2</div>
<div id="post-3"     class="col-md-4 no-pad containerhover">post-3</div>

＆＃13;

我可以使用getElementById来选择和隐藏没有指定id的内容吗？

1 个答案: