如何为滑块中的每张幻灯片迭代jQuery函数？

简介：这样做的目的是显示一个三部分的滑块，用户可以单击该滑块，并且他们可以使用每张幻灯片上的索引将该幻灯片上的卡片过滤为特定主题。筛选器工作正常，但是JavaScript填充索引时存在一个问题：它填充了所有3张卡片的索引，并在每张幻灯片上显示了较大的索引。相反，每张幻灯片的索引必须唯一，并且仅包含同一张幻灯片中卡片的标签。我真的想避免为不同的幻灯片重复代码。

的HTML

以下HTML包含3（li）张幻灯片。每张幻灯片均包含一个可见索引（.hashtag-list）和一个或多个商品卡片（.item）。除了第一个以外的每个（.item）都包含一个具有一个或多个主题标签值的隐藏输入。

<li class="trend-cards">
    <div class="card-items">
        <div class="item trendingtopiccardblock">
            <div class="hashtag-list"></div>
        </div>
        <div class="item">
            <input class="tags" type="hidden" value="TopicA,TopicB"/>
        </div>
        <div class="item">
            <input class="tags" type="hidden" value="TopicC"/>
        </div>
    </div>
</li>
<li class="trend-cards">
    <div class="card-items">
        <div class="item trendingtopiccardblock">
            <div class="hashtag-list"></div>
        </div>
        <div class="item">
            <input class="tags" type="hidden" value="TopicC, TopicD"/>
        </div>
        <div class="item">
            <input class="tags" type="hidden" value="TopicA,TopicC,TopicD"/>
        </div>
    </div>
</li>
<li class="trend-cards">
    <div class="card-items">
        <div class="item trendingtopiccardblock">
            <div class="hashtag-list"></div>
        </div>
        <div class="item">
            <input class="tags" type="hidden" value="TopicA, TopicD"/>
        </div>
        <div class="item">
            <input class="tags" type="hidden" value="TopicB,TopicC,TopicD"/>
        </div>
    </div>
</li>

的JavaScript

下面的jQuery从.tags类中提取值，将它们存储在数组中，删除重复项，对它们进行排序，然后将HTML填充到回调中。（忽略countryButtons和国家数组，因为这无关紧要。）

    populateHashtagList: function() {

        var $cards = $(".card-items .tags");
        var list = [];
        var $countryButtons = $('.card-filtering li .country-filtering');
        var countries = [];

        $countryButtons.each(function() {
           countries.push(this.firstChild.data.replace("#", "").toLowerCase());
        });

        //Get tag values, set to lowercase and store in List array
        $cards.each(function() {
            var tags = getTags($(this).val());
            $(tags).each(function (index, value) {
                var tagValue = value.toLowerCase();
                if($.inArray(tagValue, countries) === -1) list.push(value);
            });

        });

        //Remove duplicates from the array
        var uniqueTags = [];
        $.each(list, function(i, el){
            if($.inArray(el, uniqueTags) === -1) uniqueTags.push(el);

        });
        uniqueTags.sort(); 

        function getTags(parameter) {
            var arr = parameter.split(',');
            return arr;
        }

        //Populate hash-tag List
        var hashtagList = $('.hashtag-list');

        populateHashtagList();

        function populateHashtagList(callback) {

            $.each(uniqueTags, function(i, el){
                var htmlToInsert = '<span class="active"><a href="#">' + el + '</a></span>';
                hashtagList.append(htmlToInsert);
            });

            if(typeof callback == "function")
            callback();  
        }
    }

我尝试过的

• 使用$（“。trend-cards”）。each函数隔离该函数。这导致了相同的大列表，但在每张幻灯片上都增加了三倍。
• 将更具体的路径添加到.tags选择器，这没有改变。
• 一旦设置了.tags变量，就使用父选择器，然后从那里调用函数的其余部分。在这种情况下，不会填充任何标签。

感谢您对此的任何反馈和投入。我想学习将来如何做得更好。非常感谢你！