有没有办法将这些 .hide() 方法压缩成更好的 DRY 格式？答案

【问题标题】：Is there a way to condense these .hide() methods into a better DRY format?有没有办法将这些 .hide() 方法压缩成更好的 DRY 格式？
【发布时间】：2023-03-24 02:39:01
【问题描述】：

我正在为我的项目设置一个过滤器，它将根据选择的任何名称过滤特定值，或者选择所有值是用户选择“全部”。我将按钮 ID 和输入类名存储在一个对象中，然后使用 Object.keys 和 forEach 遍历它们。每当用户选择特定选项时，我想隐藏所有其他选项，以便只显示所选选项的值。我现在的工作正常，但我想尝试将其压缩为 DRY 格式，以便代码看起来更干净。非常感谢任何关于如何压缩 .hide() 方法的想法！谢谢！

let filterObjs = {
        '#allBtn': '.all',
        '#name1Btn': '.name1',
        '#name2Btn': '.name2',
        '#name3Btn': '.name3',
        '#name4Btn': '.name4',
        '#name5Btn': '.name5'
    }

    Object.keys(filterObjs).forEach(function (key) {
        let value = filterObjs[key];
        $(key).on("click", function () {
            if ($(value).val() === "All") {
                $(value).removeAttr("style");
                $('#filterOption').html($(value).val())
                $('.name1').hide()
                $('.name2').hide()
                $('.name3').hide()
                $('.name4').hide()
                $('.name5').hide()
            } else if ($(value).val() === "Name1") {
                $(value).removeAttr("style");
                $('#filterOption').html($(value).val())
                $('.all').hide()
                $('.name2').hide()
                $('.name3').hide()
                $('.name4').hide()
                $('.name5').hide()
            } else if ($(value).val() === "Name2") {
                $(value).removeAttr("style")
                $('#filterOption').html($(value).val())
                $('.all').hide()
                $('.name1').hide()
                $('.name3').hide()
                $('.name4').hide()
                $('.name5').hide()
            } else if ($(value).val() === "Name3") {
                $(value).removeAttr("style")
                $('#filterOption').html($(value).val())
                $('.all').hide()
                $('.name1').hide()
                $('.name2').hide()
                $('.name4').hide()
                $('.name5').hide()
            } else if ($(value).val() === "Name4") {
                $(value).removeAttr("style")
                $('#filterOption').html($(value).val())
                $('.all').hide()
                $('.name1').hide()
                $('.name2').hide()
                $('.name3').hide()
                $('.name5').hide()
            } else if ($(value).val() === "Name5") {
                $(value).removeAttr("style")
                $('#filterOption').html($(value).val())
                $('.all').hide()
                $('.name1').hide()
                $('.name2').hide()
                $('.name3').hide()
                $('.name4').hide()
            } 
        });
    });

【问题讨论】：

请参阅How to Ask 并显示您的 HTML。然后，考虑将类用作类（类似事物的集合）而不是 ID。
还有：stackoverflow.com/questions/5736811/…

标签： javascript jquery

【解决方案1】：

给他们常见的类，比如names 和namesBtn，然后你就隐藏一个类。此外，switch case 将是比 if/else 更好的实现，因为您正在检查特定值。

$('.namesBtn').on('click', function(){
    // assign the val as a data attribute on the button
    const btnVal = $(this).data('val')
    // this is a very odd function - removing the style attribute? Why not toggle to a different class?
    $(`.${btnVal}`).removeAttr('style')
    $('#filterOption').html(btnVal)
    $('.all').hide()
    $('.names').hide()
 })

【讨论】：

【解决方案2】：

是的，您可以提前存储匹配项，甚至可以将不同的选择器组合在一起：

const elems = $('.all, .name2, .name3'); // etc

// Then later on
elems.hide();

【讨论】：