Can you store a HTML element class name into an array then call it to run in JQuery attributes?

user_10067020 0
Viewed 173

Is it possible to store an HTML class name like class="group01" into an array then call it to run a jQuery property like .show()? Below I wrote an example of what I'm trying to do. I'm kinda so-so when it comes to javascripting arrays.

Example:

<div class="stuff group01"></div>
<div class="stuff group02"></div>
<div class="stuff group03"></div>

<script>
    $(function() {
        $('.stuff').hide();
        const classArray = ['.group01','.group02','.group03'];
        var pNum = '1; //will change with a dropdown input element

        switch (pNum) {
            case pNum = '1':
                $(classArray[0]).show();
                $(classArray[1][2]).hide();
            break;
            case pNum = '2':
                $(classArray).show();
                $(classArray[0][2]).hide();
            default:
                $('.group03').after('<p>ERROR</p>');
        }
    });        
</script>

End result should be that the other div elements with the classname of group01 etc. should hide according to what dropdown input is selected.

If this is not possible, how would you go about making something thats similar to this logic? I tried looking around but no one really seem to have an answer to this particular situation.

html jquery javascript
3 Answers

classArray[0], classArray[1], classArray[2] are your only valid items.

classArray[0][2] would imply there is another array within classArray[0].

Example

const classArray = [['a1', 'a2', 'a3'], "Item 1", "Item 2"] 

classArray[0][2] => 'a3'
classArray[1][0] => error  
classArray[2] => 'Item 2'

You'll need to separately hide each individual item.

Providing just classArray to $() is not valid as it is expecting a string not an array

You can convert your array to a string and pass that value to $()

Example 1

const knownClasses = [".item-1", ".item-2", ".item-3"]

// You can use .slice(startIndex, endIndex) to slice a portion of the array
const items = knownClasses.join()

console.log(items) // `.item-1 .item-2 .item-3`

$(items).hide

Example 2

function determineVisibility(classArr, acceptedSet) {
    const showClasses = [];
    const hideClasses = [];
    classArr.forEach(c => {
      if (acceptedSet.includes(c)) {
        showClasses.push(c);
      } else {
        hideClasses.push(c);
      }
    });

    return { showClasses: showClasses.join(), hideClasses: hideClasses.join() };
}

const classArr = [".class-1", ".class-2", ".class-3", ".class-4"];
const acceptedSet = [".class-1", ".class-4"];

const { showClasses, hideClasses } = determineVisibility(classArr, acceptedSet);

$(showClasses).show();
$(hideClasses).hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="class-1">1</div>
<div class="class-2">2</div>
<div class="class-3">3</div>
<div class="class-4">4</div>
<div class="class-5">5</div>

user_102972370

Here is a basic example. Add an event listener to buttons and get the value when clicked. Use that value to show the correct class value you want to get.

const cool = document.getElementsByClassName("cool");
for (let i = 0; i < cool.length; i++)
{
    // add event listener to all buttons 
    // which calls a function passing value of button
    cool[i].addEventListener("click", function(){ 
        calling(this.value);
    });
}  

function calling(number)
{
    const awesome = document.getElementsByClassName("awesome");
    for (let i = 0; i < awesome.length; i++)
    {    
        if (i == number) {  
            awesome[number].style.cssText = "display: block";  
        } else {
            awesome[i].style.cssText = "display: none";
        }
    }       
}
<button class="cool" value="0">Apple</button>
<button class="cool" value="1">Banana</button>
<button class="cool" value="2">Orange</button>
    
<div class="awesome" style="display: none;">apple</div>
<div class="awesome" style="display: none;">banana</div>
<div class="awesome" style="display: none;">orange</div>

user_111999400

This won't work as you expect, since the switch executes once the script is loaded. If you're just getting started at javascript, I'd advice against using jQuery, since you can pick some wierd syntax and believe it's standard javascript when it's not.

Provided you add a [data-option] attribute to each of your dropdown options, i.e.

<li data-option="1">option 1</li>

In vanilla javascript you could use something like this:

elementsToHideOrShow = document.querySelectorAll('.stuff');
document.querySelectorAll('[data-option]').forEach(option => {
    option.addEventListener('click', function(){
        elementsToHideOrShow.forEach(element => 
            element.classList.toggle('hidden', !element.classList.contains('group0' + option.dataset['option']))
        );
    });
});
user_60871780
Related