[英]Can you select more than one Id?
<p class="Links" onclick="window.location.href = 'file:///C:/Users/Dell/Desktop/Online%20Store.html#Residential'; document.getElementById('residence1, residence2, residence3').style.display='block'; document.getElementById('Commercial').style.display='none';">
Residential
</p>
I am trying but I fail to select more than one id using this method.我正在尝试,但无法使用此方法选择多个 ID。 Is my method correct or wrong?
我的方法是对还是错?
I assume you're referring to this code:我假设您指的是此代码:
document.getElementById('residence1, residence2, residence3').style.display='block'
You are able to select multiple elements with .querySelectorAll()
which will return a node list that you can iterate over with .forEach()
您可以使用
.querySelectorAll()
选择多个元素,这将返回一个节点列表,您可以使用.forEach()
进行迭代
So, for your example, you could do the following:因此,对于您的示例,您可以执行以下操作:
document.querySelectorAll('#residence1', '#residence2', '#residence3').forEach(el => el.style.display='block')
You can use query selectors to get multiple elements at once.您可以使用查询选择器一次获取多个元素。 Check this page out to get a brief list of how to use
querySelectorAll()
.查看此页面以获取有关如何使用
querySelectorAll()
的简要列表。
In your case you can simply use在您的情况下,您可以简单地使用
querySelectorAll("#id1, #id2, #id3")
which will return an array of all the elements matching these id's querySelectorAll("#id1, #id2, #id3")
将返回与这些 id 匹配的所有元素的数组
If you need to collect a bunch of elements based on more than one selector, querySelectorAll
is your best friend.如果您需要基于多个选择器收集一堆元素,
querySelectorAll
是您最好的朋友。
Unlike jQuery, querySelectorAll returns a NodeList
type of object, similar to an array.与 jQuery 不同,querySelectorAll 返回一个
NodeList
类型的对象,类似于数组。 To execute anything on each of the collection's members, you need to iterate over the collection yourself, eg using forEach
:要对集合的每个成员执行任何操作,您需要自己遍历集合,例如使用
forEach
:
<p onclick="document.querySelectorAll('#residence1, #residence2, #residence3').forEach(el => el.style.display='block')"> Residential </p> <div id="residence1" style="display: none;">residence1</div> <div id="residence2" style="display: none;">residence2</div> <div id="residence3" style="display: none;">residence3</div>
Please note that this addresses only your immediate syntactical needs;请注意,这仅解决了您直接的语法需求; it merely fixes your (bad) approach.
它只是修复了你的(坏)方法。
What you should instead/not do:你应该/不应该做什么:
hidden
attribute of HTML.hidden
属性。 Example:例子:
Instead of doing而不是做
element.style.display = 'block'
rather make sure your CSS has a class .hidden
defined而是确保您的 CSS 定义了一个
.hidden
类
.hidden { display: none; }
and then to show an element, remove the class from it, and to hide it, add the class:然后要显示一个元素,从中删除类,然后隐藏它,添加类:
element.classList.remove('hidden'); // show
element.classList.add('hidden'); // hide
As stated before, specifically for showing/hiding, the most simple thing to do is toggle the boolean hidden
property of the element:如前所述,专门用于显示/隐藏,最简单的做法是切换元素的布尔
hidden
属性:
element.hidden = false; // show
element.hidden = true; // hide
or, if you prefer attributes over properties:或者,如果您更喜欢属性而不是属性:
element.removeAttribute('hidden'); // show
element.setAttribute('hidden', 'hidden'); // hide
Also, as other have already stated, if you need to toggle the visibility of a whole collection of element, the best way is to give all those elements the same CSS class name (which makes it much easier to select):此外,正如其他人已经说过的,如果您需要切换整个元素集合的可见性,最好的方法是为所有这些元素提供相同的 CSS 类名(这使得选择更容易):
<p onclick="document.querySelectorAll('.residence').forEach(el => el.hidden = !el.hidden)"> Residential </p> <div class="residence" hidden>residence1</div> <div class="residence" hidden>residence2</div> <div class="residence" hidden>residence3</div>
I've also added the capability to rather toggle the visibility of the .residence
div elements by not assigning a literal value to el.hidden
, but instead taking what's already in el.hidden
and inverting the boolean using the not operator !
我还添加了通过不为
el.hidden
分配文字值来切换.residence
div 元素可见性的功能,而是采用.residence
已有的el.hidden
并使用not 运算符反转布尔值!
. .
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.