$(document).ready(function() {
        $( "section.danh-nguyen" ).hide();
        $( "section.maria-zvonareva" ).hide();
        $( "section.melinda-stoker" ).hide();
        $( "section.madison-fox" ).hide();

        $( "span.custom-button" ).click(function() {

            $( this ).addClass( "custom-button-click" ).siblings().removeclass("custom-button-click");

            if ( $( this ).hasClass( "dinh-nguyen" ) ) { 

                $( "section.dinh-nguyen" ).show();
                $( "section.maria-zvonareva" ).hide();
                $( "section.all" ).hide();

            } else if ( $( this ).hasClass( "maria-zvonareva" ) ) {

                        $( "section.maria-zvonareva" ).show();
                        $( "section.dinh-nguyen" ).hide();
                        $( "section.all" ).hide();

            else {

                        $( "section.melinda-stoker" ).hide();
                        $( "section.maria-zvonareva" ).hide();
                        $( "section.all" ).show();

            }

        });
        });
    })(jQuery);

这是一个示例。 有什么建议可以提高代码质量并缩短代码质量？我要创建的是this

• 5个可点击的按钮（艺术家名称）
• 下面的画廊中的图片根据您单击的艺术家而改变

我尝试为图片分配类，以便在图片之间进行交换而不是在部分之间进行交换，但是我的代码惨遭失败，因为我希望图库看起来像砌筑网格，图片填补了左上角的空白，但两者之间存在空白可见的图片。

相反，我用静态图片预定义了布局来制作整个部分，而我在各个部分之间交换而不是在图片之间交换。