javascript - 如何为 slider 中的每张幻灯片迭代 jQuery 函数？

Question

摘要:其目的是显示一个由 3 部分组成的 slider ，用户可以点击该 slider ，并且他们可以使用每张幻灯片上的索引将该幻灯片上的卡片过滤到特定主题。过滤器工作正常，但 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 变量后使用父选择器，并从那里调用函数的其余部分。在这种情况下，不会填充主题标签。

我感谢任何对此的反馈和意见。我想学习将来如何做得更好。非常感谢!

Answer 1

将此代码包装在 .each() 函数中是最好的解决方案。您说您尝试过，但您可能忘记指定卡片和主题标签列表选择器的父元素。

这是一个工作示例:https://jsfiddle.net/k3oajavs/

$(".trend-cards").each(function(){
    var $cards = $(".card-items .tags", this);
    // ...
    var hashtagList = $('.hashtag-list', this);
});