如何遍历字符串数组以生成 class 选择器

Question

我有一长串字符串，例如“authorA”、“authorB”、“authorC”。我正在尝试遍历该数组以将其用作 css class 选择器。

但是，它不起作用。我尝试了各种组合，但我无法让 jquery 将字符串理解为 class。我究竟做错了什么？下面是我最近的尝试。

   (selected_authors_array).forEach(function (item, index) {

       $('#card-content > ('.' + item)').show();

    });

这是完整的代码：

                var script = document.createElement("script");
                script.innerHTML = `
                    $('[id="filtro-${artigo.author.name}"]').change(function() {

                        show_content('#conteudo-reports', 'Relatórios');
                        $("#nav-tab").fadeIn();
                        $("#pagination").fadeIn(); //pagination
                        $("#nav-share").fadeOut(); //back button       

                        if(this.checked){
                            filtered_authors_set.add('.${(artigo.author.name).split(' ').join('')}'); 
                        }
                        else {
                            filtered_authors_set.delete('.${(artigo.author.name).split(' ').join('')}');                              
                        }

                        if(filtered_authors_set.size == 0){
                            $('#card-content > *').show();
                            $('#grid-content > *').show();
                            $('#list-content > *').show();                                 
                        }
                        else {                           
                            $('#card-content > *').hide();
                            $('#grid-content > *').hide();
                            $('#list-content > *').hide(); 
                            
                            selected_authors_array = Array.from(filtered_authors_set);

                            (selected_authors_array).forEach(function (item, index) {
                                console.log(item);
                                
                                $('#card-content > item').show();
                                $('#grid-content > item').show();
                                $('#list-content > item').show();
                            });

                        }
                                                   
                    });
                    `;
                document.head.appendChild(script);

Answer 1

您构建选择器的方式是一个字符串 #card-content > (、一个点和第二个字符串 + item) 使用模板字面量

可以更轻松地做到这一点

$(`#card-content > .${item}`).show();

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Answer 2

你可以试试这个

const selected_authors_array = ["authorA", "authorB", "authorC"];
const selectors = [];

// create an array of selectors
selected_authors_array.forEach(function(item, index) {
  selectors.push("." + item);
});

$("#card-content")
  .find(selectors.join(', ')) // join them to form a list of selectors
  .show();

.authorA,
.authorB,
.authorC {
  display: none;
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<div id="card-content">
  <div class="authorA">Author A (should show)</div>
  <div class="authorB">Author B (should show)</div>
  <div class="authorC">Author C (should show)</div>
</div>

<div class="authorA">Author A (should hide)</div>
<div class="authorB">Author B (should hide)</div>
<div class="authorC">Author C (should hide)</div>

如何遍历字符串数组以生成 class 选择器

How to iterate over an array of strings to generate class selectors

javascript

css

jquery

selector