私は2枚のカードをめくろうとしています。「ボックス」ごとに重複する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>
フリップをクリックすると、関連する div ボックスのボックスを非表示にしたいです。
したがって、クラス 2 内で「フリップ」をクリックすると、クラス 2 に関連付けられている div を非表示にします。