如何讓一個按鈕切換jquery中的其他按鈕？

Question

我正在嘗試優化我的代碼，我完全不知道我該怎么做才能讓它更短更干凈。 我該怎么做才能使這段代碼更簡潔更短？ 我會很感激有關制作和保持代碼干凈的提示

$(document).ready(function() 
{
    $("#artButton").click(function()
    {
    $("#dlc").fadeIn(500); 
    $("#info").fadeOut(500); 
    $("#info").fadeOut(500);
    $("#info").fadeOut(500);
    }),
    $("#infoButton").click(function()
    {
        $("#dlc").fadeOut(500);
        $("#info").fadeIn(500);
        $("#placeholder").fadeOut(500);
        $("#placeholder").fadeOut(500);        
    }),
    $("#placeholderButton").click(function()
    {
        $("#dlc").fadeOut(500);
        $("#info").fadeOut(500);
        $("#placeholder").fadeIn(500);
        $("#placeholder").fadeOut(500); 
    }),
    $("#placeholderButton2").click(function()
    {
        $("#dlc").fadeOut(500);
        $("#info").fadeOut(500);
        $("#placeholder").fadeOut(500);
        $("#placeholder").fadeIn(500); 
    });
});

Answer 1

在某些方面，這是一個見仁見智的問題，但您可以做的一件事是將規則與相同的事件結合起來，刪除重復的事件，並鏈接發生在同一元素上的事件

 $(document).ready(function() { $("#artButton").click(function() { $("#dlc").fadeIn(500); $("#info").fadeOut(500); }), $("#infoButton").click(function() { $("#dlc").fadeOut(500); $("#info").fadeIn(500); $("#placeholder").fadeOut(500); }), $("#placeholderButton").click(function() { $("#dlc", "#info").fadeOut(500); $("#placeholder").fadeIn(500).fadeOut(500); }), $("#placeholderButton2").click(function() { $("#dlc", "#info").fadeOut(500); $("#placeholder").fadeOut(500).fadeIn(500); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="artButton">artButton</button><button id="infoButton">infoButton</button><button id="placeholderButton">placeholderButton</button><button id="placeholderButton2">placeholderButton2</button> <hr> <div id="dlc">dlc</div> <div id="info">info</div> <div id="placeholder">placeholder</div>