Как сократить данный js (jquery) код?

#javascript #jquery #инспекция_кода

Здравствуйте. Пожалуйста помогите грамотно сократить данный код, сам не справляюсь:



$('.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
    
        
            
                
                    
                    
                    
                    
                        
Неисправность:
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    
                    
                        
Описание:
                        
                            

                                ^Выберете неисправность выше^
                                
                                Чай
                                
                                
                                Высокогорный
                                
                                
                                Ребята
                                
                                
                                Пили
                                
                                
                                Днем
                                
                                
                                На горе
                                
                                
                                Высокой
                                
                                
                                В палатке
                                
                                
                                С шашлычком.
                                
                                
                                В кустиках следил за ними												
                                
                                
                                Ара!
                                
                            
                        
                    
                
            
        
    




    

Ответы

Ответ 1

$('.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();


Ответ 2

Все классы с похожим именем можно найти с помощью селектора:

button[class^=but]


Что означает класс начинается на but

Затем отделяем из класса окончание

let id=$(this).attr('class').substring(4);


siblings() выделяет все соседние элементы



$('button[class^=but]').click(function() {
  let id=$(this).attr('class').substring(4);
  $('.hidden-'+id).show().siblings().hide();
  $('.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
	display: none
.hidden-wf
	display: none
.hidden-vm
	display: none
.hidden-mc
	display: none
.hidden-ld
	display: none
.hidden-ca
	display: none
.hidden-bt
	display: none
.hidden-hm
	display: none
.hidden-eye
	display: none
.hidden-bug
	display: none
.hidden-bat
	display: none
.hidden-sad
	display: none
.hidden-qa
	display: none


  

    
  

  
iPhone 4/4S

  
		
			
				
					
						
					
  
						
Неисправность:
						
						
						
						
						
						
						
						
						
						
						
						
					  
  

  
						
Описание:
						
						

							^Выберете неисправность выше^

  
								Чай
							
  
								Высокогорный
							
  
								Ребята
							
  
								Пили
							
  
								Днем
							
  
								На горе
							
  
								Высокой
							
  
								В палатке
							
  
								С шашлычком.
							
  
							  В кустиках следил за ними												
							
  
							Ара!