獲得父級分類

我想翻轉兩張牌。我不想爲每個「盒子」創建重複的javascript，所以我可以輕鬆地添加盒子，只需將類別或ID更改爲盒子的編號即可。獲得父級分類

這裏是我的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="base.css"> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
<script type="text/javascript" src="jquery.flip.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script> 
<title></title> 
<script> 
    $(document).ready(function(){ 
     $(".flip").click(function() { 
      var className = $('.box').attr('id'); 
      $('#'+className).flip({ 
       direction:'lr', 
       color: 'white', 
      }); 

      $('#'+className+' .content').hide(); 
      $('#'+className+' .flipped_content').show(); 
     }); 

     $(".revert").click(function() { 
      var className = $('.box').attr('id'); 
      $('#'+className).flip({ 
       direction:'lr', 
       color: '#82f5f5', 
      }); 
      $('#'+className+' .flipped_content').hide(); 
      $('#'+className+' .content').show(); 

     }); 

    }); 
</script> 
</head> 

<body> 
<div id="nav"> 


    <div id="clear"></div> 
</div><!-- END NAV --> 

<div id="container"> 

    <div id="1" class="box"> 
     <div id="content" class="content"> 
      <div id="flip" class="flip"> 
       <img src="flip.png" width="25px"/> 
      </div> 
      <br/><br/> 
      <h1 align="center">Subject 1</h1><br/> 
      <p>This is a description of subject 1</p> 
     </div> 

     <div id="content" class="flipped_content b"> 
      <div id="flip" class="revert"> 
       <img src="flip.jpg" width="25px"/> 
      </div> 
      <br/><br/> 
      <h1 align="center">Subject 1 B</h1><br/> 
      <p>This is a description of subject 1 B</p> 
     </div> 
    </div><!-- END BOX --> 

    <div id="2" class="box"> 
     <div id="content" class="content"> 
      <div id="flip" class="flip"> 
       <img src="flip.png" width="25px"/> 
      </div> 
      <br/><br/> 
      <h1 align="center">Subject 2</h1><br/> 
      <p>This is a description of subject 2</p> 
     </div> 

     <div id="content" class="flipped_content b"> 
      <div id="flip" class="revert"> 
       <img src="flip.jpg" width="25px"/> 
      </div> 
      <br/><br/> 
      <h1 align="center">Subject 2 B</h1><br/> 
      <p>This is a description of subject 2 B</p> 
     </div> 
    </div><!-- END BOX --> 



    <div id="clear"></div> 

    <div id="footer"> 
     <hr> 

     <p style="float:right;">Tiny Learners - Copyright 2012</p> 

     <p align="left">About</p> 

     <p align="left">Contact</p> 
    </div> 
</div><!-- END CONTAINER --> 
</body> 
</html>

當我點擊翻頁我想知道隱藏相關的股利盒的盒。

所以，當我點擊裏面2類「翻轉」我想隱藏帶班2.

來源

2012-07-24 Chris Olson

'id's應該是唯一的 – Musa 2012-07-24 00:18:14

我不會不重複的jQuery。我想要相同的JavaScript爲所有的框工作。 – 2012-07-24 00:21:25

@Chris：是的，這就是爲什麼你不能使用ID。即使你有多個具有相同ID的元素，jQuery總是隻會選擇其中的一個**（很可能是第一個）。順便說一句，你的問題的標題並沒有真正描述你的問題... – 2012-07-24 00:22:05

除了穆薩的評論相關的div ID應該是唯一的，你將得太多問題。你不需要父類，你可以直接與父類進行交互。

改變flip ID一類後：

$(".flip").click(function() { 
    $(this).parent().hide(); 
});

來源

2012-07-24 00:20:38 bhamlin

我仍然想把類號放入一個變量中。你知道一個辦法嗎？ – 2012-07-24 00:32:09

同意以上：http://jsfiddle.net/TNwYE/

來源

2012-07-24 00:26:47 sanusart

獲得父級分類

回答

相關問題