развернуть и скрыть JQuery

0

Может ли кто-нибудь указать, где следующее: "Плохой код"? К сожалению, я не могу полностью связать/отобразить страницу, на которой он включен, но с сентября это послужило целью показать скрытый контент при нажатии соответствующей кнопки. Теперь по какой-то причине мне сообщили, что код "плохой код", и функция нарушена и должна быть переписана. Идея этого кода состоит в том, чтобы иметь заголовки с расширяющейся кнопкой (expandBtn.png), и когда эта кнопка нажата, скрытый контент открывается, а expandBtn.png затем превращается в hideBtn.png, который снова скрывает содержимое щелкнул.

Я не знаю, где сценарий "сломан" или что он делает/не делает, что он должен или не должен, но, видимо, еще один разработчик смог заглянуть в код без просмотра страницы и сказать, что это неправильно, поэтому я надеюсь, что кто-то здесь достаточно квалифицирован, чтобы посмотреть на код и, возможно, посмотреть, что не так. Заранее спасибо.

     // FOR EACH SECTION THAT HAS THE HIDDEN CONTENT BE SURE TO CHANGE THE ID OF THE IMG IN THE MARKUP TO HAVE THE SINGULAR FORM OF THE #SWITCH ID 

    $(document).ready(function()     
    { $('div.hiddenComplexity').hide();});
            $('div.expandingBtnComplexity').click(function()
          {$('div.hiddenComplexity').slideToggle('fast');
            }); 

    $(document).ready(function(){
    var openIconPath = 'openIconPath';
    var closedIconPath = 'closedIconPath';

    $('#switch_images').click(function(){

    if($(this).attr('src') == openIconPath){
     $(this).attr('src', closedIconPath);
    }else{ 
     $(this).attr('src',openIconPath);
    }
   });
   });
   //
   //

   $(document).ready(function(){

   var openIconPath = '/resource/uploads_scope/img/expandBtn.png';
   var closedIconPath = '/resource/uploads_scope/img/hideBtn.png';

   $('#switch_image').click(function(){

   if($(this).attr('src') == openIconPath){
     $(this).attr('src', closedIconPath);
   }else{ 
     $(this).attr('src',openIconPath);
   }
   });
   });
  • 1
    Если это работает, то это не "сломано". Это звучит как то, что вы должны спросить у другого разработчика, независимо от того, какой ответ (ы) вы получите здесь.
  • 0
    Начните с объединения ready функций, если это все один файл. Тогда я бы предложил, в зависимости от того, какую версию jquery вы используете, пытаясь использовать какое-то делегирование, например on , delegate или в live . Эти методы будут привязывать события к текущим и будущим элементам. Для раздела с путями к изображениям вы можете использовать другой элемент, отличный от изображения, и изменить изображение путем добавления / удаления классов. В общем, вам нужно очистить дубликат кода.
Показать ещё 5 комментариев
Теги:
expand

1 ответ

2

Быстро вы можете:

  1. Устранить функцию избыточной готовности
  2. Свернуть селектора так, чтобы поиск не был вычислен несколько раз

Результат:

$(function () {
    // Set the selectors
    var $hiddenComplexity = $('div.hiddenComplexity'),
        $expandingBtnComplexity = $('div.expandingBtnComplexity'),
        $switchImage = $('#switch_image');

    // Setup the icon paths
    var openIconPath = '/resource/uploads_scope/img/expandBtn.png',
        closedIconPath = '/resource/uploads_scope/img/hideBtn.png';

    $hiddenComplexity.hide();

    // Bind the handlers
    $switchImage.click(function () {
        var src = $switchImage.attr('src');
        switchImage.attr('src', src == openIconPath ? closedIconPath : openIconPath);
    });

    $expandingBtnComplexity.click(function () {
        $hiddenComplexity.slideToggle('fast');
    });
});

В любом случае, возможно, вы должны рассмотреть более подход ООП.

  • 0
    Я использовал это, что работает круто ... но я не могу заставить изображения переключаться в зависимости от того, открыт скрытый div или закрыт. Вот сайт, на котором я могу его показать: flyjay.com заметит, что изображение не переключается. Вы можете увидеть код через просмотр источника.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню