Javascript 在一个数组中存储多个CSS类

作为一个整体，我对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="&#xe000;"></div>
</div>
<div class="item two">
    <div class="fs1" aria-hidden="true" data-icon="&#xe003;"></div>
</div>
<div class="item three">
    <div class="fs1" aria-hidden="true" data-icon="&#xe001;"></div>
</div>
<div class="item four">
    <div class="fs1" aria-hidden="true" data-icon="&#xe002;"></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上额外的选择器。

使用

push

方法，如

var arrayClass = [];
$('.item.two').click(function() { 
   arrayClass.push($(this));
});

alert(arrayClass);

---

您不必一次又一次地重复同一个类，也不需要在数组中存储类

改变

到

在本例中，您可以将类存储在

字符串中，而不是
数组中
$（'.item.one、.item.three、.item.four'）

您的意思是，您试图使用jQuery选择一个项目列表，因为您已经使用了很多类别？您可以通过使用jquery索引、eq和this选择器来实现这一点。
下面是关于如何使用索引功能缩短代码的完整描述
如果我理解正确，您正在尝试更改单击的元素

 $('.item.two').click(function(){
    // there is no reason to show and then hide all
    $('.content.item, .current.item').hide();
    $('.item').not(this).fadeTo(0, 0.5);
    $(this).fadeTo(0, 1.0);
});

检查这是否适合你

编辑另一种方法可能是在循环中的类中使用索引后缀
乙二醇

你可以用class1，class2，class3来代替

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

到

用于（var i=1；iIt看起来你没有得到它，你不必在选择器中键入同一个类四次，一次就足够了。向我们展示HTML，我们将尝试向你展示一种更好的方式。抱歉，我实际上为我隐藏/显示的每件事都使用了唯一的类。应该更清楚一些。我的CSS和每个.item都有一些与上一个稍有不同的地方，所以我最后做了一些类似的事情，直到itemFour。所以这并不是所有你能将它们存储在字符串中的东西，显示你的html可以让它更清晰，如果你能使你的类名与通配符一起使用，那么你就可以使用属性选择器了。太好了，我会详细研究这个。到目前为止，它对我来说运行得很好，我只是在访问字符串中数据的不同部分时遇到了问题。我会去做更多的研究，谢谢！不需要提供
$（this）
，只需要提供
this
，就像在
中创建的选择一样。not（）
将被解析为jQuery对象；因此会导致不必要的冗余。此外，如果
.content
和
.current
将被
$（'.item'）
作为目标。如果是这样的话，您必须链接
.not（）
，例如
.not（此）。not（'.current，.content'）
我不知道$（本）冗余。谢谢你，第二…给出的代码本身是模糊的，我正在等待提问者回复，然后可以根据情况进行更改。考虑到可能的情况，我100%同意问题的模糊性和提供的代码。我本可以创建相同的准确答案，但只提供关于的部分不包括其他选择器。另外，可能还有一条关于第二行选择器冗余的信息，以及第二行如何取消第一行的信息。+1尽管如此。抱歉，如果我不清楚，伙计们，我只是在尝试学习一些新东西。我会尝试在将来对我的问题不那么模棱两可。我会给他们一个答案ot，明天回来报到。谢谢！
classesSet = ".item.one, .item.three, .item.four";
$(strClassesSet).fadeTo(0, 0.5); 

 $('.item.two').click(function(){
    // there is no reason to show and then hide all
    $('.content.item, .current.item').hide();
    $('.item').not(this).fadeTo(0, 0.5);
    $(this).fadeTo(0, 1.0);
});

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

for(var i=1;i<=4;i++){
  $('.item.'+i).click(function(){
        // this is the content i want to show on click
        $('.content.class'+i).show();
        // this is the content that i want to hide/remain hiding on click
        $('.content class').hide();

        // these are icons representing the content
        $('.item').not(this).fadeTo(0, 0.5);
        $(this).fadeTo(0, 1.0);
    });

}