The And ( & & ) operator in jQuery

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

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

You need to take all the elements that I specified below, hide them and show the element with id= "f11".

I managed to do this, but I need to optimize the code, I used the logical operator And ( & & ), but since I just started learning 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, which doesn't 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 you click on a link with id= "f1", and you need to click on id= " f1 "or id= "f111".

Thank you in advance!

Author: Abmin, 2016-04-13
Source

2 answers

According to your data:

$('#f1,#f111').click(function(){
    $('#f9,#f22,#f33,#f44,#f55,#f66,#f77,#f88').hide(0,function(){
        $('#f11').show(0);
    });
});
 0
Author: borodatych, 2016-04-13 21:23:35

I will give you a not quite 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();
});

However, you will have to change the markup a little.In the {[3] attribute]}specify 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 fast, I think you will find how to improve it.

You can read about what was used here:

 1
Author: Shadow33, 2016-04-13 22:34:48