作为一个整体,我对 JQuery 和 JavaScript 还是很陌生,所以请耐心等待。我尝试在网上搜索我的问题的答案并进行了一些实验,但我快干了。无论如何,有没有办法用 JavaScript将多个 CSS 类存储在一个数组中?
我正在为朋友的投资组合网站编写一些简单的 JQuery,例如:
$('.item.two').click(function(){
$('.content.item, .current.item').show();
$('.content.item, .content.item, .content.item, .current.item, .current.item, .current.item').hide();
$('.item.one, .item.three, .item.four').fadeTo(0, 0.5);
$('.item.two').fadeTo(0, 1.0);
});
所有这一切都是隐藏某些元素,并且仅在单击其相应图标时才显示它们。当点击时,这也将不透明度从主类的 50% 变为 100%。
代码本身没有问题,它达到了预期的目的。但是有没有办法通过将这些类保存到一个可重用的数组中来稍微清理一下这段代码?我觉得这应该是可能的,但我不确定如何。
谢谢!
编辑:对不起,我不清楚我实际上是在使用 4 个不同的类来隐藏或显示。所以实际上不是之前的位
$('.item.two').click(function(){
// this is the content i want to show on click
$('.content.itemTwo').show();
// this is the content that i want to hide/remain hiding on click
$('.content.itemOne, .content.itemThree, .content.itemFour').hide();
// these are icons representing the content
$('.item.one, .item.three, .item.four').fadeTo(0, 0.5);
$('.item.two').fadeTo(0, 1.0);
});
另外,这是你们中的一些人要求的我的 HTML。就像我说的,我试图让事情发生,发生了。我只是觉得有更好的方法来实现它。
<!-- these are icons representing the written content-->
<div class="item one">
<div class="fs1" aria-hidden="true" data-icon=""></div>
</div>
<div class="item two">
<div class="fs1" aria-hidden="true" data-icon=""></div>
</div>
<div class="item three">
<div class="fs1" aria-hidden="true" data-icon=""></div>
</div>
<div class="item four">
<div class="fs1" aria-hidden="true" data-icon=""></div>
</div>
<!-- this is the written content to be shown upon clicking corresponding icon -->
<div class="content itemOne">
<h3>itemOne</h3>
<p>....</p>
</div>
<div class="content itemTwo">
<h3>itemTwo</h3>
<p>...</p>
<div class="content itemThree">
<h3>itemThree</h3>
<p>...</p>
</div>
<div class="content itemFour">
<h3>itemFour</h3>
<p>....</p>
</div>
现在看,我可能不需要 .content 或 .item 上的额外选择器。