Здравствуйте. Пожалуйста помогите грамотно сократить данный код, сам не справляюсь:
^Выберете неисправность выше^
Чай
Высокогорный
Ребята
Пили
Днем
На горе
Высокой
В палатке
С шашлычком.
В кустиках следил за ними
Ара!
$('.but-wd').click(function() {
$('.hidden-wd').show();
$('.hidden-wf').hide();
$('.hidden-vm').hide();
$('.hidden-mc').hide();
$('.hidden-ca').hide();
$('.hidden-bt').hide();
$('.hidden-hm').hide();
$('.hidden-eye').hide();
$('.hidden-bug').hide();
$('.hidden-bat').hide();
$('.hidden-qa').hide();
$('.prev').hide();
});
$('.but-wf').click(function() {
$('.hidden-wd').hide();
$('.hidden-wf').show();
$('.hidden-vm').hide();
$('.hidden-mc').hide();
$('.hidden-ca').hide();
$('.hidden-bt').hide();
$('.hidden-hm').hide();
$('.hidden-eye').hide();
$('.hidden-bug').hide();
$('.hidden-bat').hide();
$('.hidden-qa').hide();
$('.prev').hide();
});
$('.but-vm').click(function() {
$('.hidden-wd').hide();
$('.hidden-wf').hide();
$('.hidden-vm').show();
$('.hidden-mc').hide();
$('.hidden-ca').hide();
$('.hidden-bt').hide();
$('.hidden-hm').hide();
$('.hidden-eye').hide();
$('.hidden-bug').hide();
$('.hidden-bat').hide();
$('.hidden-qa').hide();
$('.prev').hide();
});
$('.but-mc').click(function() {
$('.hidden-wd').hide();
$('.hidden-wf').hide();
$('.hidden-vm').hide();
$('.hidden-mc').show();
$('.hidden-ca').hide();
$('.hidden-bt').hide();
$('.hidden-hm').hide();
$('.hidden-eye').hide();
$('.hidden-bug').hide();
$('.hidden-bat').hide();
$('.hidden-qa').hide();
$('.prev').hide();
});
$('.but-ca').click(function() {
$('.hidden-wd').hide();
$('.hidden-wf').hide();
$('.hidden-vm').hide();
$('.hidden-mc').hide();
$('.hidden-ca').show();
$('.hidden-bt').hide();
$('.hidden-hm').hide();
$('.hidden-eye').hide();
$('.hidden-bug').hide();
$('.hidden-bat').hide();
$('.hidden-qa').hide();
$('.prev').hide();
});
$('.but-bt').click(function() {
$('.hidden-wd').hide();
$('.hidden-wf').hide();
$('.hidden-vm').hide();
$('.hidden-mc').hide();
$('.hidden-ca').hide();
$('.hidden-bt').show();
$('.hidden-hm').hide();
$('.hidden-eye').hide();
$('.hidden-bug').hide();
$('.hidden-bat').hide();
$('.hidden-qa').hide();
$('.prev').hide();
});
$('.but-hm').click(function() {
$('.hidden-wd').hide();
$('.hidden-wf').hide();
$('.hidden-vm').hide();
$('.hidden-mc').hide();
$('.hidden-ca').hide();
$('.hidden-bt').hide();
$('.hidden-hm').show();
$('.hidden-eye').hide();
$('.hidden-bug').hide();
$('.hidden-bat').hide();
$('.hidden-qa').hide();
$('.prev').hide();
});
$('.but-eye').click(function() {
$('.hidden-wd').hide();
$('.hidden-wf').hide();
$('.hidden-vm').hide();
$('.hidden-mc').hide();
$('.hidden-ca').hide();
$('.hidden-bt').hide();
$('.hidden-hm').hide();
$('.hidden-eye').show();
$('.hidden-bug').hide();
$('.hidden-bat').hide();
$('.hidden-qa').hide();
$('.prev').hide();
});
$('.but-bug').click(function() {
$('.hidden-wd').hide();
$('.hidden-wf').hide();
$('.hidden-vm').hide();
$('.hidden-mc').hide();
$('.hidden-ca').hide();
$('.hidden-bt').hide();
$('.hidden-hm').hide();
$('.hidden-eye').hide();
$('.hidden-bug').show();
$('.hidden-bat').hide();
$('.hidden-qa').hide();
$('.prev').hide();
});
$('.but-bat').click(function() {
$('.hidden-wd').hide();
$('.hidden-wf').hide();
$('.hidden-vm').hide();
$('.hidden-mc').hide();
$('.hidden-ca').hide();
$('.hidden-bt').hide();
$('.hidden-hm').hide();
$('.hidden-eye').hide();
$('.hidden-bug').hide();
$('.hidden-bat').show();
$('.hidden-qa').hide();
$('.prev').hide();
});
$('.but-qa').click(function() {
$('.hidden-wd').hide();
$('.hidden-wf').hide();
$('.hidden-vm').hide();
$('.hidden-mc').hide();
$('.hidden-ca').hide();
$('.hidden-bt').hide();
$('.hidden-hm').hide();
$('.hidden-eye').hide();
$('.hidden-bug').hide();
$('.hidden-bat').hide();
$('.hidden-qa').show();
$('.prev').hide();
});
.but
button
display: inline-block
background-color: #fff
color: #111
border: none
outline: none
text-align: center
padding: 13px
line-height: 0
font-size: em(55px)
margin: 0
letter-spacing: -5px
+mt(.18s)
&:hover, &:focus
color: #68ffff
text-decoration: none
.hidden
&-wd, &-wf, &-vm, &-mc, &-ld, &-ca, &-bt, &-hm, &-eye, &-bug, &-bat, &-sad, &-qa
display: none
iPhone 4/4S
Неисправность:
Описание:
Ответ
$('.but').on('click', 'button', function(){
$('.portfolio-popup-text span').hide();
$('.hidden-' + $(this).attr('class').split('-')[1]).show();
$('.prev').hide();
});
Как подсказывают в комментарии: при таком подходе может что-то сломаться, если классы добавятся в кнопки. Поэтому в них можно добавить атрибут data и брать уже не класс, а атрибут
Например:
и в JS будет уже:
$(".hidden-" + $(this).data("id")).show();
Комментариев нет:
Отправить комментарий