2012-01-25 93 views
2

如何縮短此代碼?每個CSS選擇器增加+1。除非選擇了.mug(x),否則所有Bio的div都是隱藏的。如何縮短此javascript代碼?顯示隱藏多個div

感謝

 <script type='text/javascript'> 
       $(document).ready(function() { 
        $(".mug1").click(function() { 
         $("#bios div").hide(); 
         $(".bio1").show();      
        });      
        $(".mug2").click(function() { 
         $("#bios div").hide(); 
         $(".bio2").show();      
        });      
        $(".mug3").click(function() { 
         $("#bios div").hide(); 
         $(".bio3").show();      
        });      

      }); 
     </script> 

     <h2>Meet the team</h2> 

     <div id="mugshots"> 
      <img src="images/img-mugshot.jpg" alt="mug" class="mug1"/> 
      <img src="images/img-mugshot.jpg" alt="mug" class="mug2"/> 
      <img src="images/img-mugshot.jpg" alt="mug" class="mug3"/> 
     </div> 

     <div id="bios"> 
      <div class="bio1"></div> 
          <div class="bio2"></div> 
          <div class="bio3"></div> 
        </div> 
+0

您基本上正在實現[jQuery UI Accordion](http://jqueryui.com/demos/accordion/) – jrummell

回答

1

只是用食指和添加爲你想要的:

$('#mugshots>img').on('click', function() { 
    $("#bios div").hide(); 
    var myIndex = $(this).index("#mugshots> img"); 
    $("#bios> div").eq(myIndex).show(); 
}); 

的這個較短的版本是:

$('#mugshots>img').on('click', function() { 
    $("#bios div").hide().eq($(this).index("#mugshots> img")).show();; 
}); 
2

簡單的方法是一個循環

$(document).ready(function() { 
    for (var i = 1; i <= 3; i++) { 
    $(".mug" + i).click(function() { 
     $("#bios div").hide(); 
     $(".bio" + i).show(); 
    });      
    } 
}); 

有可能是一個更好的辦法仍然是我沒有想到的。

+0

這可能是最簡單的,儘管您可能必須重新聲明「i」以避免關閉問題。另一種方法是檢查自己的類的單個函數,找到'mugX'並從中計算'bioX'類。你也可以例如使'mugX'和'bioX'類的名稱相同,並將它們引用爲'div.mugshots .mugX'和'div.bios div.mugX'來區分它們。 – Rup

4

沿着這些線?您的JS

<div id="bios"> 
     <div class="bio" data-id="1"></div> 
         <div class="bio" data-id="2"></div> 
         <div class="bio" data-id="3"></div> 
       </div> 

然後向該:

的HTML改成這樣

$(".mug").click(function() { 
        $("#bios div").hide(); 
        $(".bio[data-id='" + $(this).data("id") + "'", $("#bios")).show();      
       }); 

這種方式,你可以添加儘可能多的茶杯和BIOS,只要你喜歡不不得不添加更多的js。

+1

Html元素ID不能以數字開頭。 – Samich

+0

啊,堅果,這個想法確實跨越了我的想法。 – DavidGouge

+0

修改爲使用數據屬性。沒有測試,但這個想法應該沒問題。 ;) – DavidGouge

1

試試這個:

$(document).ready(function() { 
    $("img[alt=mug]").each(function() { 
     $(this).click(function(){ 
      var id = $(this).attr("class").substr(3, 1); 
      $("#bios div").hide(); 
      $(".bio" + id).show(); 
     }); 
    }); 
}); 
+0

我不確定'rel = mug'?你可以用'div.mugshots img'代替我的想法。 – Rup

+0

它應該也與rel一起工作。我認爲你的意思是'div#mugshots img' –

+0

'哦,是的,我把它看作'class = mugshots'。好的 - 圖像上沒有rel屬性,只有alt,但我可以相信它匹配那個或其他的東西,我錯了。 – Rup

1

使用.EQ()和你的嫌疑犯照片的指數,假設第一面部照片去與第一生物,第二面部照片與第二生物,依此類推。

http://api.jquery.com/eq/

此外,使用一個類來跟蹤你的積極生物,而不是每次更新的所有BIOS調用隱藏。

JS:

$(document).ready(function() { 
    $('#mugshots img').click(function() { 
    $('#bios .active').hide().removeClass('active'); 
    $('#bios div').eq($(this).index()).show().addClass('active'); 
    }); 
}); 

HTML:

<h2>Meet the team</h2> 

    <div id="mugshots"> 
     <img src="images/img-mugshot.jpg" alt="mug"/> 
     <img src="images/img-mugshot.jpg" alt="mug"/> 
     <img src="images/img-mugshot.jpg" alt="mug"/> 
    </div> 

    <div id="bios"> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div>