获得父级分类

我想翻转两张牌。我不想为每个“盒子”创建重复的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

获得父级分类

回答

相关问题