Можете ли вы сохранить имя класса элемента HTML в массиве, а затем вызвать его для запуска в атрибутах JQuery?

Question

Можно ли сохранить имя класса HTML, например class = "group01" , в массиве, а затем вызвать его для запуска свойства jQuery, например .show () ? Ниже я написал пример того, что я пытаюсь сделать. Я вроде как-то так, когда дело доходит до массивов JavaScript.

Пример:

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

Конечным результатом должно быть то, что остальные элементы div с именем класса group01 et c. следует скрыть в соответствии с выбранным выпадающим входом.

Если это невозможно, как бы вы go сделали что-то похожее на эту логику c? Я попытался осмотреться, но никто, похоже, не нашел ответа на эту конкретную ситуацию.

Answer 1

Вот базовый пример c. Добавьте прослушиватель событий к кнопкам и получите значение при нажатии. Используйте это значение, чтобы показать правильное значение класса, которое вы хотите получить.

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>

Answer 2

classArray[0], classArray[1], classArray[2] ваши единственные действительные пункты.

classArray[0][2] означает, что в classArray[0] есть другой массив.

Пример

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

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

Вы должны будете отдельно скрыть каждый отдельный элемент.

Предоставление только от classArray до $() недопустимо, поскольку оно ожидает string не array

---

Вы можете преобразовать свой массив в строку и передать это значение в $()

Пример 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

Пример 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>

Answer 3

Это не будет работать так, как вы ожидаете, так как переключатель выполняется после загрузки скрипта. Если вы только начинаете с javascript, я бы посоветовал вам не использовать jQuery, поскольку вы можете выбрать какой-нибудь странный синтаксис и верить, что это стандартный javascript, когда его нет.

При условии, что вы добавите Атрибут [data-option] для каждой из опций выпадающего меню, например

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

В vanilla javascript вы можете использовать что-то вроде этого:

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