Question

我仍然是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上的额外选择器。

Answer 1

如果我正确理解，您正在尝试更改单击的元素。

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

检查这是否适合你

编辑另一个approch可能是在循环中的类中使用索引后缀例如

你可以改用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);
});

到

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

}

希望你能从中得到approch

Answer 2

使用{/ 1}}方法，如

push

Answer 3

您不必反复重复同一个类，也不需要在数组中存储类。

更改

 $('.content.item, .content.item, .content.item, .current.item, .current.item, .current.item').hide();

到的

 $('.content.item').hide();

在这种情况下，您可以在string而不是array中存储课程$('.item.one, .item.three, .item.four')

classesSet = ".item.one, .item.three, .item.four";
$(strClassesSet).fadeTo(0, 0.5);

Answer 4

你的意思是你试图使用jQuery选择一个项目列表，因为你已经使用了很多条款？您可以使用jquery索引，使用eq和this选择器来完成此操作。以下是有关如何使用索引功能缩短代码的完整说明 http://api.jquery.com/index/

在数组中存储多个CSS类

4 个答案: