JQuery在多個div之間切換

我試圖在div之間切換，以便在單擊某個標籤時div會顯示。當另一個標籤被點擊時，div將替換顯示的div。JQuery在多個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);

目前這工作，但我知道，這是可以做的更好，而不是使用if語句。

感謝

來源

2013-04-23 Mark

你也可以擺脫所有這些編號的ID，並使用元素的索引+一個普通的類。這個問題會更適合http://codereview.stackexchange.com – 2013-04-23 14:45:54

使用類！節省您噸的時間！ http://stackoverflow.com/questions/2951556/show-hide-divs-with-same-class-jquery – tymeJV 2013-04-23 14:46:22

這就是我的觀點......我想擺脫如果陳述。我知道有這樣做的最好方法..我正在通過jsfiddle搜索，發現這個：http://jsfiddle.net/karalamalar/62NPt/4/ 但對我來說它不起作用 – Mark 2013-04-23 14:51:56

這裏，我們去：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屬性來顯示目標div。

來源

2013-04-23 14:52:21 Joe

沒有工作。我一定做錯了什麼。他們正在彼此之間 – Mark 2013-04-23 14:55:42

請確保你看着jsfiddle鏈接並更新你的html，所以它看起來像我的。 – Joe 2013-04-23 14:56:25

@Joe您應該確保插件句柄應用於多組元素。事實上，它作爲一個插件是沒有用處的，因爲它只能使用一次。您可以在div上放置一個「data-slide-group」屬性，並將該組名稱作爲插件選項。 – plalx 2013-04-23 14:57:10

通常，我通過創建hidden類來完成此操作。當你切換到一個新的div，你可以做這樣的事情：

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

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

它使用not選擇應有盡有，但你的當前項目。 Sans動畫，這是做它的簡單方法。您也可以使用$('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') 
});

可能有助於清理一些東西。

來源

2013-04-23 14:56:45 ckersch

JQuery在多個div之間切換

回答

相關問題