Hello. I need your help, when I click on the link:

<a id="f1" href="#">Текст</a>

It is necessary to take all the elements that I indicated below, hide them and show the element with id = "f11".

I managed to do it, but I need to optimize the code, I used the logical operator AND (&&), but since I just started to learn JQuery, the optimized version does not work for me.

Here is the old code that works:

 $('#f1').click(function(){ $('#f9').hide(0,function() { $('#f22').hide(0,function() { $('#f33').hide(0,function() { $('#f44').hide(0,function() { $('#f55').hide(0,function() { $('#f66').hide(0,function() { $('#f77').hide(0,function() { $('#f88').hide(0,function() { $('#f11').show(0); }); }); }); }); }); }); }); }); });

And this is the new "optimized" code that does not work:

 $('#f1').click(function(){ $('#f9'&&'#f22'&&'f33'&&'f44'&&'f55'&&'f66'&&'f77'&&'f88').hide(0,function() { $('#f11').show(0); }); });

And one more thing, my code is executed when I click on the link with id = "f1", but I need it when I press id = "f1" or id = "f111".

Thank you in advance!

  • one
    $('#f9, #f22, #f33, #f44, ...') - Igor
  • Thank you very much, but how can I do that when I click on not only the link id = "f1" but also on id = "f111"? As far as I know, this is an operator or (||), but how can I write in my code? - Abmin
  • You can specify comma-separated selectors. Are you sure that you can not be easier? can give an example of html; you can see what the elements depend on and not make such long enumerations. - Shadow33
  • @Abmin - "... I had to silently swallow the fact that someone was unable to continue from this place by himself, with a leap of imagination." Forester "Lieutenant Hornblower" - $('#f1, #f111').click - Igor
  • Able, the reason is that it does not work like $ ('# f1, # f111') I also thought it would work. Laid out all the code here - Abmin

2 answers 2

According to your data:

 $('#f1,#f111').click(function(){ $('#f9,#f22,#f33,#f44,#f55,#f66,#f77,#f88').hide(0,function(){ $('#f11').show(0); }); });

    Let me give you a not very good but simple solution to your task.

     // повешу скрипт на он на случай динамического изменения страницы $(document).on('click','.navmenu li a',function(e){ // это спасет вас от прыжков страницы при клике на ссылку e.preventDefault(); // забираем атрибут data var blockName = $(this).data('block'); // скрываем все в блоке контента $('.contentblock div').hide(); // показываем только необходимое $('.'+blockName).show(); });

    True, it will have to change a little markup. In the data-block attribute, we indicate which block will be displayed.

      <div class="navmenu"> <ul> <li><a data-block = 'druk' href="#">Широкоформатний друк</a></li> <li><a data-block = 'photodoc' href="#">Фото на документи</a></li> . .. . .. .. . . .. <li><a data-block = 'last' href="#">Колажі</a></li> </ul> </div>

    The content block should look something like this:

     <div class = 'contentblock'> <div class = 'druk'></div> .......................... <div class = 'last'></div> </div>

    The solution is not elegant but a quick think I will find how to improve.

    You can read about the used here:

    • Thank you very much for taking the time to respond - Abmin