我們可以使用切換來代替if / else和隱藏/顯示邏輯嗎

Question

我希望不使用if / else if / else和hide / show來處理此問題。 我們可以使用切換來處理這種情況嗎？

$("#target").change(function () {
    var value = $(this).val();
    if (value === "A" || value === "B") {
        $ele1.show()
        $ele2.hide()
    } else if (value === "C") {
        $ele2.show()
        $ele1.hide()
    } else {
        $ele1.hide()
        $ele2.hide()
    }

});

Answer 1

這是另一種方法：

 const toggleMap = { "A" : 1, "B" : 1, "C" : 2 }, $elements = $("element"); // cache all the elements you want to toggle $("#target").change( elem => { $elements.hide(); // Hides all elements $elements[ toggleMap[elem.target.value] ].show(); // Shows only element 1/2/3 depending on value }); 

優點：只需更新toggleMap ，即可輕松添加，刪除和控制toggleMap多個元素。

Answer 2

在不使用過多if / else的情況下處理不同情況的一種方法是創建一個函數對象：

var handler = {
    A: () => {
        $ele1.show();
        $ele2.hide();
    },
    B: () => {
        $ele1.show();
        $ele2.hide();
    },
    C: () => {
       $ele2.show();
       $ele1.hide();
    },
    default: () => {
        $ele1.hide();
        $ele2.hide();
    }
};

const handle = (value) => {
    const func = handler[value] || handler.default;
    func();
}

$("#target").change(function () {
    var value = $(this).val();    
    handle(value);
});