javascript - 您可以将 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>

最终结果应该是类名为 group01 等的其他 div 元素应根据选择的下拉输入隐藏。

如果这是不可能的，您将如何制作类似于此逻辑的东西？我试着环顾四周，但似乎没有人真正能回答这一特殊情况。

Answer 1

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>