javascript - 单击显示更多(按钮)后如何将主题列表限制为 5(项目)仅显示 3(项目)-6ren

Làm thế nào để giới hạn danh sách chủ đề thành 5 (mục) sau khi nhấp vào nút hiển thị thêm (nút) chỉ có 3 (mục) được hiển thị

In lại 作者：行者123 更新时间：2023-11-28 03:13:14

如何在单击显示更多(按钮)后将主题列表限制为 5 个(项目)。

还有 3(项目)，依此类推到列表末尾，然后它会显示显示更少(按钮)。

Ví dụ:在 Udemy 过滤器选项中，当您点击查看更多按钮时，它仅显示5 个项目.

这是我的整个代码:

模板代码

脚本代码


export default {
    name: 'FilterPanelModal',
    data: function() {
        trở lại {
            // For Filter By Topic
            FilterByTopic_default_limit: 5,
            FilterByTopic_limit_by: 5,
            FilterByTopic: {
                FilterByTopic_Title: "Topic",
                FilterByTopic_Name: "Topic",
                FilterByT: [],
                FilterByTopicOptions: [
                    { 
                        Topic_id: 0, 
                        Topic_UID: "JXETdWWM",
                        Topic_Name: "Ionic",
                        Topic_Count: "(0)"
                    },
                    { 
                        Topic_id: 1, 
                        Topic_UID: "g2K8SkFA",
                        Topic_Name: "PHP",
                        Topic_Count: "(0)"
                    },
                    { 
                        Topic_id: 2, 
                        Topic_UID: "P1Q6HOFN",
                        Topic_Name: "Python",
                        Topic_Count: "(0)"
                    },
                    { 
                        Topic_id: 3, 
                        Topic_UID: "rMzXsrwO",
                        Topic_Name: "Ruby & Rails",
                        Topic_Count: "(0)"
                    },
                    { 
                        Topic_id: 4, 
                        Topic_UID: "IaMfmedm",
                        Topic_Name: ".NET / C#",
                        Topic_Count: "(0)"
                    },
                    { 
                        Topic_id: 5, 
                        Topic_UID: "kAqpieja",
                        Topic_Name: "Java",
                        Topic_Count: "(0)"
                    },
                    { 
                        Topic_id: 6, 
                        Topic_UID: "rUf0AGyV",
                        Topic_Name: "Perl",
                        Topic_Count: "(0)"
                    },
                    { 
                        Topic_id: 7, 
                        Topic_UID: "znaJ4diW",
                        Topic_Name: "ColdFusion",
                        Topic_Count: "(0)"
                    },
                    { 
                        Topic_id: 8, 
                        Topic_UID: "uXmoqYpc",
                        Topic_Name: "JavaScript",
                        Topic_Count: "(0)"
                    },
                    { 
                        Topic_id: 9, 
                        Topic_UID: "daL54tCv",
                        Topic_Name: "ActionScript",
                        Topic_Count: "(0)"
                    },
                    { 
                        Topic_id: 10, 
                        Topic_UID: "GiXDC0oe",
                        Topic_Name: "Angular",
                        Topic_Count: "(0)"
                    },
                    { 
                        Topic_id: 11, 
                        Topic_UID: "AvNhruTX",
                        Topic_Name: "C++",
                        Topic_Count: "(0)"
                    },
                    { 
                        Topic_id: 12, 
                        Topic_UID: "tUxVxhHH",
                        Topic_Name: "SQL",
                        Topic_Count: "(0)"
                    },
                    { 
                        Topic_id: 13, 
                        Topic_UID: "kfvzVRsH",
                        Topic_Name: "MySQL",
                        Topic_Count: "(0)"
                    },
                    { 
                        Topic_id: 14, 
                        Topic_UID: "wSeLABXD",
                        Topic_Name: "MongoDB",
                        Topic_Count: "(0)"
                    },
                    { 
                        Topic_id: 15, 
                        Topic_UID: "SuqxZbEM",
                        Topic_Name: "Dart",
                        Topic_Count: "(0)"
                    },
                    { 
                        Topic_id: 16, 
                        Topic_UID: "BwAXbUmp",
                        Topic_Name: "Haskell",
                        Topic_Count: "(0)"
                    },
                    { 
                        Topic_id: 17, 
                        Topic_UID: "cHSjfDKs",
                        Topic_Name: "Kotlin",
                        Topic_Count: "(0)"
                    },
                    { 
                        Topic_id: 18, 
                        Topic_UID: "PEpWCdtF",
                        Topic_Name: "Ruby",
                        Topic_Count: "(0)"
                    },
                    { 
                        Topic_id: 19, 
                        Topic_UID: "RWMKGkCj",
                        Topic_Name: "NodeJS",
                        Topic_Count: "(0)"
                    },
                    { 
                        Topic_id: 20, 
                        Topic_UID: "NqHzgDWS",
                        Topic_Name: "Wordpress",
                        Topic_Count: "(0)"
                    }
                ]
            }, // End Filter By Topic

            // For Filter By SubCategory
            FilterBySubCategory: {
                FilterBySubCategory_Title: "Subcategory",
                FilterBySubCategory_Name: "Subcategory",
                FilterBySubCat: [],
                FilterBySubCategoryOptions: []
            },
            // End Filter By SubCategory

            // For Filter By Level
            FilterByLevel: {
                FilterByLevel_Title: "Level",
                FilterByLevel_Name: "Level",
                FilterByLv: [],
                FilterByLevelOptions: []
            },
            // End Filter By Level

            // For Filter By Language
            FilterByLanguage: {
                FilterByLanguage_Title: "Language",
                FilterByLanguage_Name: "Language",
                FilterByLang: [],
                FilterByLanguageOptions: []
            }
            // End Filter By Language

        }
    },
    computed: {

    },
    methods: {
        FilterByTopic_MoreAndLess (FilterByTopic_default_limit, filters_length) {
            this.FilterByTopic_limit_by = (this.FilterByTopic_limit_by === FilterByTopic_default_limit) ? filters_length : FilterByTopic_default_limit;
        }
    }
}

1 Câu trả lời

FilterByTopic_MoreAndLess 函数是错误的，您在这里要做的是增加显示的主题数量，直到显示所有主题，然后返回到初始状态。

FilterByTopic_MoreAndLess (limit, total) {
          if(this.FilterByTopic_limit_by >= total)
            this.FilterByTopic_limit_by = limit;
          khác
            this.FilterByTopic_limit_by += limit;
        }

现在只需更改按钮标签的条件即可。

{{ FilterByTopic_limit_by === FilterByTopic.FilterByTopicOptions.length ? "See More" : "See Less" }}

关于javascript - 单击显示更多(按钮)后如何将主题列表限制为 5(项目)仅显示 3(项目)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59909280/

Các bài viết nóng hổi trên toàn bộ trang web

trang đầu

đã học

Trí tuệ nhân tạo 6Ren

Trung tâm mua sắm

Làm thế nào để giới hạn danh sách chủ đề thành 5 (mục) sau khi nhấp vào nút hiển thị thêm (nút) chỉ có 3 (mục) được hiển thị