Is there a way to condense these .hide() methods into a better DRY format?

Question

I'm setting up a filter for my project that will filter specific values based on whatever name is selected, or selecting all values is a user selects 'all'. I have the button ID and the input class name stored in an object and then use Object.keys and forEach to iterate through them. Whenever a user selects a specific option, I want to hide all other options so only the value of the selected option appear. What I have now works fine but I want to try to condense it to a DRY format so the code looks cleaner. Any ideas on how to condense the .hide() methods is greatly appreciated! Thanks!

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()
            } 
        });
    });

Please see [ask] and show your HTML. Then, consider using classes as classes (sets of like things) instead of as IDs. — isherwood, Jul 22 '21 at 14:24
Also : https://stackoverflow.com/questions/5736811/multiple-selector-chaining-in-jquery — isherwood, Jul 22 '21 at 14:25

score 1 · Answer 1 · answered Jul 22 '21 at 14:27

Give them common classes like names and namesBtn then you just hide the one class. Also, switch case would be a better implementation than if/else since you are checking specific values.

$('.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()
 })

score 0 · Answer 2 · answered Jul 22 '21 at 14:21

0

Yes, you can just store the match early, and even combine your different selectors together:

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

// Then later on
elems.hide();

answered Jul 22 '21 at 14:21

Kelvin Schoofs

8,323
1
12
31

Is there a way to condense these .hide() methods into a better DRY format?

2 Answers2