1

Здравствуйте. Нужна ваша помощь, мне при нажатии на ссылку:

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

Нужно взять все элементы которые я указал ниже, скрыть их и показать элемент с id="f11".

У меня это получилось сделать, но мне нужно оптимизировать код, я использовал логический оператор И (&&), но так как я только начал изучать JQuery у меня оптимизированный вариант не работает.

Вот старый код, который работает:

$('#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);
                                          });
                                      });
                                  });
                              });
                          });
                      });
                  });
              });
          });

А это новый "оптимизированный" код, который не работает:

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

И ещё одно, у меня код исполняется при нажатии на ссылку с id="f1", а нужно при нажатии id="f1" или id="f111".

Заранее благодарю!

12
  • 1
    $('#f9, #f22, #f33, #f44, ...')
    – user176262
    13 апр 2016 в 21:20
  • Спасибо большое, а как мне сделать чтобы при нажатии не только на ссылку id="f1" а ещё и на id="f111" ? Насколько знаю, то это оператор или (||) но как правильно мне написать в моём коде?
    – Abmin
    13 апр 2016 в 21:25
  • указать селекторы через запятую можно. А вы уверенны что нельзя легче? может приведете пример html можно посмотреть от чего зависят элементы и не делать таких долгих перечислений.
    – Shadow33
    13 апр 2016 в 21:25
  • @Abmin - "... пришлось молча проглотить тот факт, что кто-то неспособен продолжать с этого места сам, прыжком воображения." Форестер "Лейтенант Хорнблауэр" - $('#f1, #f111').click
    – user176262
    13 апр 2016 в 21:31
  • Способен, причина в том что не работает так $('#f1, #f111') я тоже думал что будет работать. Выложил весь код здесь
    – Abmin
    13 апр 2016 в 21:37

2 ответа 2

1

Приведу не совсем хорошее но простое решение вашего задания.

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

Правда прийдетеся изменить немного разметку.В атрибуте data-blockуказываем какой блок будет отображаться.

    <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>

Блок с контентом должен выглядеть примерно так:

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

Решение не изящное но быстрое думаю найдете как улучшить.

Почитать о использованном можно тут:

1
  • Спасибо большое что уделили время на ответ
    – Abmin
    13 апр 2016 в 22:45
0

По вашим данным:

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

Ваш ответ

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

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