JQuery Toggle Между несколькими divs

Question

Я пытаюсь переключаться между div, чтобы при нажатии тега отображался div. Когда другой тег щелкнут, div заменит отображаемый div.

Это то, что я сделал.

HTML:

<a href="#" rel="#slidingDiv">a</a><br> 
<a href="#" rel="#slidingDiv_2">b</a><br> 
<a href="#" rel="#slidingDiv_3">c</a><br> 
<a href="#" rel="#slidingDiv_4">d</a><br> 

<div id="slidingDiv">a</div> 
<div id="slidingDiv_2">a</div> 
<div id="slidingDiv_3">a</div> 
<div id="slidingDiv_4">a</div> 

Jquery:

function ($) { 
$.fn.showHide = function (options) { 

    //default vars for the plugin 
    var defaults = { 
     speed: 1000, 
     easing: '', 
     changeText: 0, 
     showText: 'Show', 
     hideText: 'Hide' 

    }; 
    var options = $.extend(defaults, options); 

    $(this).click(function() { 

       var toggleDiv; 

       var $divA = $('#slidingDiv'), 
        $divB = $('#slidingDiv_2'), 
         $divC = $('#slidingDiv_3'), 
         $divD = $('#slidingDiv_4'), 
         $divE = $('#slidingDiv_5'), 
         $divF = $('#slidingDiv_6'), 
         $divG = $('#slidingDiv_7'), 
         $divH = $('#slidingDiv_8'), 
         $divI = $('#slidingDiv_9'); 

       if($divA.is(':visible')){ 
         $divA.hide(); 
      } 
       if($divB.is(':visible')){ 
         $divB.hide(); 
      } 
       if($divC.is(':visible')){ 
         $divC.hide(); 
      } 
       if($divD.is(':visible')){ 
         $divD.hide(); 
      } 
       if($divE.is(':visible')){ 
         $divE.hide(); 
      } 
       if($divF.is(':visible')){ 
         $divF.hide(); 
      } 
       if($divG.is(':visible')){ 
         $divG.hide(); 
      } 
       if($divH.is(':visible')){ 
         $divH.hide(); 
      } 
       if($divI.is(':visible')){ 
         $divI.hide(); 
      } 

       // this reads the rel attribute of the button to determine which div id to toggle 
       toggleDiv = $(this).attr('rel'); 


     $('.toggleDiv').slideUp(options.speed, options.easing); 

       // this var stores which button you've clicked 
     var toggleClick = $(this); 

      var toggleDiv = $(this).attr('rel'); 

       // here we toggle show/hide the correct div at the right speed and using which easing effect 
      $(toggleDiv).slideToggle(options.speed, options.easing, function() { 
      // this only fires once the animation is completed 
       // if(options.changeText==0){ 
       //$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText); 
       //} 

      }); 

     return false; 

    }); 

}; 
})(jQuery); 

Это в настоящее время работает, но я знаю, что это может быть сделано лучше, вместо того, чтобы использовать, если заявление.

Благодаря

Answer 1

Здесь мы идем: http://jsfiddle.net/fqK36/5/

Ваша целая функция становится:

$.fn.showHide = function (options) { 

    //default vars for the plugin 
    var defaults = { 
     speed: 1000, 
     easing: '', 
     changeText: 0, 
     showText: 'Show', 
     hideText: 'Hide', 
     slideDiv: '.slide-div' 
    }; 
    var options = $.extend(defaults, options); 

    return this.each(function() { 
     $(this).click(function() { 
      $(options.slideDiv).hide(); 
      // this var stores which button you've clicked 
      var toggleClick = $(this), 
       toggleDiv = $(this).data('slide-id'); 
      // here we toggle show/hide the correct div at the right speed and using which easing effect 
      $(toggleDiv).slideToggle(options.speed, options.easing, function() { 
       // this only fires once the animation is completed 
       // if(options.changeText==0){ 
       //$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText); 
       //} 

      }); 


     }); 

    }); 

}; 

Затем вы можете использовать его как это:

$('a').showHide({'slideDiv' : '.slide-div'}); 

Опция slideDiv может быть пользовательский селектор, который вы используете, может делиться с вами.

Все слайды назначаются классу, что означает, что вы можете скрыть их все сразу. Затем вы можете показать целевое div, получив атрибут data-slide-id щелкнутой ссылки.

Answer 2

Как правило, я делаю это, создавая класс hidden. Когда вы идете, чтобы перейти на новый DIV, вы можете сделать что-то вроде этого:

$(this).click(function(){ 
    $(this).removeClass('hidden') 

    $('div:not(#' + $(this).attr('id') + ')').addClass('hidden') 
}); 

Это использует селектор not, чтобы найти все, кроме текущего пункта. Без анимации это простой способ сделать это. Вы также можете захватить все, что не скрыто, используя $('div:not(.hidden)'), а затем запустите свой переключатель на все в этом селекторе.

$(this).click(function(){ 

    if($(this).hasClass('hidden'){ 
     $(this).show() 

     $(this).removeClass('hidden') 
    } 

    $('div:not(#' + $(this).attr('id') + ') :not(.hidden.)') 
     .hide().addClass('hidden') 
}); 

Может помочь немного почистить вещи.