How to shorten the given js (jquery) code?

Question

Hello. Please help competently reduce this code, I can not cope myself:

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

I don’t understand why there are so many classes to do if there is a selector and an index?
Radio buttons can be done through radio buttons without js on css.
It is possible to disable (hide) all the buttons except the one selected in the block, which is also done for the two commands $(this).parent().hide(); $(this).show()
If, honestly, I would have helped, but you didn’t describe how exactly and what should work, therefore, the radio buttons are just a guess, possibly erroneous.
@higimo, ts just wanted to cut the code, maybe he is still a novice and doesn’t even understand what he is doing.
$ (this) .show () if you hide a parent - all its child elements will also be hidden, no matter what their style
@Grundy I really don’t like that you didn’t offer your solution in this matter, but they wrote to everyone how wrong he was without stopping for a second and without thinking.
Of course, I was wrong and did not .find() , here: $(this).parent().find('button').hide() .
In no case, not against criticism, you notice everything correctly, but understand correctly, your tone does not make you doubt the qualification, but it makes you think that you are making fun of everyone.

Accepted Answer · 2017-03-24T06:51:11

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

As suggested in the commentary: with this approach, something may break if classes are added to the buttons. Therefore, they can add the data attribute and take not the class, but the attribute

For example:

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

and in JS will be:

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

did not guess :-) never this and do not need to show and hide button :)
Well, in the same place, classes that start with .hidden :-) are spans at the bottom of the page :) And you hide the buttons yourself :)
this doesn't work: $ (this) .split ('-') - you don't have this line, but the button element

Answer 2 · 2017-03-24T06:56:25

All classes with a similar name can be found using the selector:

 button[class^=but]

What does the class begin on but

Then we separate the end of the class.

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

siblings() selects all adjacent elements

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

attr ('class'). substring (4) is a bad decision, if suddenly a second class appears on the buttons, everything can break
@Grundy agree, it’s better to use the id or data attributes.
@and button id: some-id , block id: hidden-some-id - and all the same
The same id cannot be repeated, I’m not going to decide about it and decide on ides.
Classes can be repeated but the classes are not needed here, there is the main one and there is enough, the selector and the index will decide everything, here comes the <-> button to <-> text, therefore knowing the button we will define the text.

How to shorten the given js (jquery) code?

2 answers 2

More articles: