jQuery切換順序

Question

我試圖切換一些div，同時在鏈接上設置「活動」狀態。以下是我的代碼。

$(".product_buy").hide(); 
$(".product_geo").hide(); 

$("a.buy, a.geo").click(function() 
    { 
     $("#" + this.className + "_" + this.rel).slideToggle("fast"); 
     $(this).toggleClass("item_active"); 

     if (this.className == "geo") 
      { 
       $("#info_" + this.rel).slideToggle("fast"); 
      } 

     return false; 
    }); 


<ul class="title_menu"> 
    <li class="item"><a href="javascript:void(0);" class="geo" rel="blabla" title="Toggle geometry">Geometry</a></li> 
    <li class="item"><a href="javascript:void(0);" class="buy" rel="blabla" title="Toggle purchase options">Buy</a></li> 
</ul> 

<div class="product_buy" id="buy_blabla"> 
    <div class="block"> 
     <p>Buy bla bla</p> 
    </div> 
</div> 

<div class="product_geo" id="geo_blabla"> 
    <img src="geo_blabla.jpg" title="Bla bla geometry" width="750" height="857"/> 
</div> 

<div class="prod_info" id="info_blabla"> 
    <p>Info bla bla</p> 
</div> 

它切換，但不是全部在同一時間。如果同時顯示兩個div「buy」和「geo」，但鏈接的「活動」狀態似乎會讓事情變得糟糕。

我是一個noob，所以隨時嘲笑我。

編輯：解決之前，我看到了尼克的答案，所以他的解決方案可能會更好。

$(".product_buy").hide(); 
    $(".product_geo").hide(); 

    $("a.buy, a.geo").click(function() 
     { 
      var itemType = $(this).attr("rev"); 
      var itemName = $(this).attr("rel"); 

      $("#" + itemType + "_" + itemName).slideToggle("fast"); 
      $(this).toggleClass("item_active"); 

      if (itemType == "geo") 
       { 
        $("#info_" + itemName).slideToggle("fast"); 
       } 

      return false; 
     }); 

Answer 1

我在這裏建議一個總體的改變，也會在沒有JavaScript的情況下正常退化。使用href去你想要的ID，這樣的元素：

<ul class="title_menu"> 
    <li class="item"><a href="#geo" title="Toggle geometry">Geometry</a></li> 
    <li class="item"><a href="#buy" title="Toggle purchase options">Buy</a></li> 
</ul> 

<div id="buy" class="content"> 
    <div class="block"> 
    <p>Buy bla bla</p> 
    </div> 
</div> 

<div id="geo" class="content"> 
    <div> 
    <img src="geo_blabla.jpg" title="Bla bla geometry" width="750" height="857"/> 
    </div> 

    <div class="prod_info"> 
    <p>Info bla bla</p> 
    </div> 
</div> 

那麼你的jQuery也得到多簡單，就像這樣：

$(".content").hide(); 
$("ul.title_menu a").click(function(e) { 
    $(this.hash).slideToggle("fast"); 
    $(this).toggleClass("item_active"); 
    e.preventDefault(); 
}); 

You can test it out here。它的作用是使用href="#geo"作爲$("#geo")選擇器來切換正確的元素。該class="content"是這樣我們就可以隱藏他們... ...你也可以使用相同的類作爲一種機制，只顯示一次一個（通過隱藏其他內容元素，like this。

的另一大好處是這裏沒有啓用JavaScript，所有div將顯示，鏈接將滾動到適當的元素...一個很好的退化視圖，仍然適用於用戶。