Store multiple CSS classes in an array

Question

I'm still pretty new to JQuery and JavaScript as a whole, so bear with me. I tried searching the web for an answer to my question and experimented a little bit, but I'm coming up dry. Anyway, is there a way to store multiple CSS classes in an array with JavaScript?

I'm writing some simple JQuery for a friend's portfolio website such as this:

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

All this is doing is hiding certain elements and only showing them when their corresponding icon is clicked on. This is also turning the opacity from 50% off the main class to 100% when clicked on.

There's nothing wrong with the code itself, it serves its intended purpose. But is there a way to clean this code up a bit by just holding those classes into a reusable array? I feel like it should be possible, but I'm not sure how.

Thanks!

EDIT: Sorry, I wasn't clear that I'm actually using 4 different classes to hide or show. So instead of the previous bit it's actually

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

Also, here is my HTML some of you are requesting. Like I said, what I'm trying to make happen, happens. I just feel like there's a better way of making it happen.

<!-- 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>

Looking at it now, I probably don't need the extra selectors on the .content or .item.

It looks like you're not getting it, you don't have to type the same class four times inside the selector, once is enough. Show us the HTML, and we'll try to show you a better way of doing it. — adeneo
– adeneo, Commented Jul 25, 2013 at 5:28

ManMohan Vyas · Accepted Answer · 2013-07-25 05:58:00Z

1

If I correctly understood , you are trying to change the element that is clicked.

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

check if this works for you

Edit another approch could be using index suffix in classes in loop eg

you could use class1, class2, class3 instead.

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

to

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

}

Hope you can get approch from it

edited Jul 25, 2013 at 5:58

answered Jul 25, 2013 at 5:32

ManMohan Vyas

4,0924 gold badges29 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ohgodwhy Over a year ago

no need to supply $(this), just need to supply this, as the select created within .not() will be parsed as a jQuery object; and thussly causes an unnecessary redundancy. Also, what if .content and .current will be targeted by $('.item'). if that's the case, you would have to chain the .not(), such as .not(this).not('.current, .content')

ManMohan Vyas Over a year ago

I was not knowing about $(this) redundancy.thanks for that, secondly ... code given is initself ambiguous I am waiting for the asker to reply and then can change accordingly

Ohgodwhy Over a year ago

I am in 100% agreeance regarding the ambiguity of the question and the supplied code considering the possible scenarios. I would have created the same exact answer, but would've just supplied the part about excluding the other selectors. Also, maybe a piece of information about the redundancy of the selectors on the 2nd line, and how the first line is cancelled about by the 2nd line. +1 none the less.

Dann Over a year ago

Sorry if I'm unclear guys, I'm just trying to learn some new stuff. I'll try and be less ambiguous with my questions in the future. I'll give these a shot and report back tomorrow. Thanks!

HTTP · Accepted Answer · 2013-07-25 05:26:34Z

0

Use the push method like

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

alert(arrayClass);

answered Jul 25, 2013 at 5:26

HTTP

1,7343 gold badges19 silver badges22 bronze badges

Comments

Jereme · Accepted Answer · 2013-07-25 05:29:59Z

0

You mean you are trying to select a list of items using jQuery because you have been using a lot of clases? You can do this by using jquery index, with eq and the this selector. Here is a full description on how to use the index feature to make your code shorter http://api.jquery.com/index/

answered Jul 25, 2013 at 5:29

Jereme

6617 silver badges14 bronze badges

Comments

Adil · Accepted Answer · 2013-07-25 05:37:36Z

0

You do not have to repeat same class over and over and do not need to store classes in array.

Change

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

To

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

You can store classes in string instead of array in this case $('.item.one, .item.three, .item.four')

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

edited Jul 25, 2013 at 5:37

answered Jul 25, 2013 at 5:29

Adil

148k25 gold badges217 silver badges207 bronze badges

3 Comments

Dann Over a year ago

Sorry, I'm actually using unique classes for each thing I'm hiding/showing. Should have been more clear. I have a main .content class in my CSS and each .item has something a tiny bit different from the last, so I end up doing something like <div class="content itemOne"></div> and so forth until itemFour. So it's not really all <div class="content item"></div>

Adil Over a year ago

You can store them in string then, showing your html could make it more clear, if you can make your class names to be used with wild card then you can use attribute selector.

Dann Over a year ago

Great, I'll look more into this. So far it's working fine for me, I'm just having trouble accessing the different parts of data in the string. I'll go and do some more research, thanks!

Collectives™ on Stack Overflow

Store multiple CSS classes in an array

4 Answers 4

4 Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related