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

264

25 марта 2017, 01:11

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<a href="#" class="portfolio-item"> 
    <div class="rem-img-wrap"> 
        <img class="responsive-img" src="img/iPhone/iphone4.png" alt="iPhone"> 
    </div> 
    <h4>iPhone 4/4S</h4> 
    <span class="hidden"> 
        <span class="portfolio-popup price-popup"> 
            <span class="container-fluid"> 
                <span class="row"> 
                    <span class="col-xs-4 col-sm-3 col-md-3 col-lg-3"> 
                    <img class="img-responsive" src="img/iPhone/iphone4.png" alt="Alt"> 
                    </span> 
                    <span class="col-xs-12 col-sm-9 col-md-9 col-lg-9"> 
                        <h2>Неисправность:</h2> 
                        <span class="but"> 
                        <button class="but-wd"><i class="ion-waterdrop"></i></button> 
                        <button class="but-wf"><i class="ion-wifi"></i></button> 
                        <button class="but-vm"><i class="ion-volume-mute"></i></button> 
                        <button class="but-mc"><i class="ion-ios-mic-off"></i></button> 
                        <button class="but-ca"><i class="ion-ios-camera"></i></button> 
                        <button class="but-bt"><i class="ion-ios-bolt"></i></button> 
                        <button class="but-hm"><i class="ion-hammer"></i></button> 
                        <button class="but-eye"><i class="ion-eye-disabled"></i></button> 
                        <button class="but-bug">iOS</button> 
                        <button class="but-bat"><i class="ion-battery-low"></i></button> 
                        <button class="but-qa"><i class="ion-help"></i></button> 
                        </span> 
                    </span> 
                    <span class="col-xs-12 col-sm-9 col-md-9 col-lg-9"> 
                        <h2>Описание:</h2> 
                        <span class="portfolio-popup-text"> 
                            <p> 
                                <span class="prev">^Выберете неисправность выше^</span> 
                                <span class="hidden-wd"> 
                                Чай 
                                </span> 
                                <span class="hidden-wf"> 
                                Высокогорный 
                                </span> 
                                <span class="hidden-vm"> 
                                Ребята 
                                </span> 
                                <span class="hidden-mc"> 
                                Пили 
                                </span> 
                                <span class="hidden-ca"> 
                                Днем 
                                </span> 
                                <span class="hidden-bt"> 
                                На горе 
                                </span> 
                                <span class="hidden-hm"> 
                                Высокой 
                                </span> 
                                <span class="hidden-eye"> 
                                В палатке 
                                </span> 
                                <span class="hidden-bug"> 
                                С шашлычком. 
                                </span> 
                                <span class="hidden-bat"> 
                                В кустиках следил за ними												 
                                </span> 
                                <span class="hidden-qa"> 
                                Ара! 
                                </span> 
                            </p> 
                        </span> 
                    </span> 
                </span> 
            </span> 
        </span> 
    </span> 
</a>

Answer 1

$('.but').on('click', 'button', function(){
    $('.portfolio-popup-text span').hide();
    $('.hidden-' + $(this).attr('class').split('-')[1]).show();
    $('.prev').hide();
});

Как подсказывают в комментарии: при таком подходе может что-то сломаться, если классы добавятся в кнопки. Поэтому в них можно добавить атрибут data и брать уже не класс, а атрибут

Например:

<button class="but-bug" data-id="bug">iOS</button>

и в JS будет уже:

$(".hidden-" + $(this).data("id")).show();

Answer 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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
  <div class="rem-img-wrap"> 
    <img class="responsive-img" src="img/iPhone/iphone4.png" alt="iPhone"> 
  </div> 
 
  <h4>iPhone 4/4S</h4> 
 
  <span class="hidden"> 
		<span class="portfolio-popup price-popup"> 
			<span class="container-fluid"> 
				<span class="row"> 
					<span class="col-xs-4 col-sm-3 col-md-3 col-lg-3"> 
						<img class="img-responsive" src="img/iPhone/iphone4.png" alt="Alt"> 
					</span> 
  <span class="col-xs-12 col-sm-9 col-md-9 col-lg-9"> 
						<h2>Неисправность:</h2> 
						<span class="but"> 
						<button class="but-wd"><i class="ion-waterdrop"></i>1</button> 
						<button class="but-wf"><i class="ion-wifi"></i>2</button> 
						<button class="but-vm"><i class="ion-volume-mute"></i>3</button> 
						<button class="but-mc"><i class="ion-ios-mic-off"></i>4</button> 
						<button class="but-ca"><i class="ion-ios-camera"></i>5</button> 
						<button class="but-bt"><i class="ion-ios-bolt"></i>6</button> 
						<button class="but-hm"><i class="ion-hammer"></i>7</button> 
						<button class="but-eye"><i class="ion-eye-disabled"></i>8</button> 
						<button class="but-bug">iOS</button> 
						<button class="but-bat"><i class="ion-battery-low"></i>9</button> 
						<button class="but-qa"><i class="ion-help"></i>0</button> 
					  </span> 
  </span> 
 
  <span class="col-xs-12 col-sm-9 col-md-9 col-lg-9"> 
						<h2>Описание:</h2> 
						<span class="portfolio-popup-text"> 
						<p> 
							<span class="prev">^Выберете неисправность выше^</span> 
<div> 
  <span class="hidden-wd"> 
								Чай 
							</span> 
  <span class="hidden-wf"> 
								Высокогорный 
							</span> 
  <span class="hidden-vm"> 
								Ребята 
							</span> 
  <span class="hidden-mc"> 
								Пили 
							</span> 
  <span class="hidden-ca"> 
								Днем 
							</span> 
  <span class="hidden-bt"> 
								На горе 
							</span> 
  <span class="hidden-hm"> 
								Высокой 
							</span> 
  <span class="hidden-eye"> 
								В палатке 
							</span> 
  <span class="hidden-bug"> 
								С шашлычком. 
							</span> 
  <span class="hidden-bat"> 
							  В кустиках следил за ними												 
							</span> 
  <span class="hidden-qa"> 
							Ара! 
							</span> 
</div> 
  </p> 
 
  </span> 
  </span> 
  </span> 
  </span> 
  </span> 
  </span> 
</a>