如何让一个按钮切换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>