3

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

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

8
  • Вообще не понимаю, зачем столько классов делать, если есть селектор и индекс? Сколько кнопок, столько и текстов.
    – And
    24 мар 2017 в 7:11
  • Радио-кнопки можно сделать через радиокнопки без js на css. Это во-первых. Во-вторых. Можно дизейблить (скрывать) все кнопки, кроме выбранной в блоке, что тоже делается за две команды $(this).parent().hide(); $(this).show(). Если, честно, я бы помог, но вы не описали, как конкретно и что должно работать, поэтому про радиокнопки лишь догадка, возможно ошибочная.
    – higimo
    24 мар 2017 в 7:18
  • @higimo, тс просто хотел сократить код, возможно он еще новичок и не понимает даже, что делает.
    – And
    24 мар 2017 в 7:21
  • @higimo, $(this).parent().hide(); $(this).show() если скрыть родителя - все его дочерние элементы тоже будут скрыты, не зависимо от того, какой у них стиль
    – Grundy
    24 мар 2017 в 7:28
  • @Grundy мне очень не нравится, что вы в данном вопросе не предложили своего решения, но каждому написали насколько он ошибается, не остановившись на секунду и не подумав. Конечно, я ошибся и не дописал .find(), вот: $(this).parent().find('button').hide(). Ни в коем случае, не против критики, вы правильно всё подмечаете, но поймите правильно, ваш тон не заставляет сомневаться в квалификации, но заставляет думать, что вы над всеми издеваетесь. Насколько мне известно, тут так не принято.
    – higimo
    24 мар 2017 в 7:33

2 ответа 2

5
$('.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();
10
  • не угадал :-) ни разу не this и не button нужно show и hide :)
    – Grundy
    24 мар 2017 в 6:52
  • @Grundy а чо?)) 24 мар 2017 в 6:52
  • ну там же классы который с .hidden начинаются :-) это спаны внизу страницы :) А ты сами кнопки прячешь :)
    – Grundy
    24 мар 2017 в 6:53
  • @Grundy а, увидел..надо поправить) 24 мар 2017 в 6:53
  • это ж не сработает: $(this).split('-') - у тебя this не строка, а элемент кнопки
    – Grundy
    24 мар 2017 в 6:57
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>

10
  • attr('class').substring(4) - плохое решение, если вдруг появится второй класс на кнопках, все может сломаться
    – Grundy
    24 мар 2017 в 6:58
  • @Grundy согласен, тут лучше использовать id или data-атрибуты. Но в данном варианте это подходит
    – Crantisz
    24 мар 2017 в 7:03
  • @Crantisz, ид не может повторяться, не думаю. что вообще тут что - то надо.
    – And
    24 мар 2017 в 7:11
  • @and id кнопки: some-id, id блока: hidden-some-id - и все тоже самое
    – Crantisz
    24 мар 2017 в 7:14
  • @Crantisz, что все тоже самое? Один и тот же ид не может повторяться, я про это и решать на идах это не стоит. Классы могут повторяться но и классы тут не нужны, есть главный и хватает, все решит селектор и индекс, тут идет кнопка<->к<->тексту следовательно зная кнопку определим и текст. Упростит в разы задачу.
    – And
    24 мар 2017 в 7:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.