$(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);
Это образец. Любые предложения по улучшению качества кода и сделать его короче? Я пытаюсь создать это
- 5 нажимаемых кнопок (имена исполнителей)
- Картинки в галерее ниже меняются в зависимости от того, какого исполнителя вы нажимаетена
Я попытался дать классы изображениям, чтобы поменять их местами вместо того, чтобы переключаться между разделами, но мой код с треском провалился, потому что я хочу, чтобы галерея выглядела как сетка кладки с картинками, заполняющими пробелы сверху-влево, но между видимыми изображениями были промежутки.
Вместо этого я сделал целые разделы с макетом, предопределенным статическими изображениями, и я переключаюсь между разделами, а не переключаюсь между изображениями.