0

I am trying to flip two cards. I don't want to create duplicate javascript for each "box" so I can easily add boxes and just change the class or id to the number of the box.

Here is my code:

<!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>

When I click on flip I want to know hide the box of the associated div box.

So when I click "flip" inside class 2 I want to hide the div associated with class 2.

4

2 回答 2

5

除了 Musa 的 id 应该是唯一的评论之外，您还想多了这个问题。您不需要父类，您可以直接与父类交互。

将flipid 更改为类后：

$(".flip").click(function () {
    $(this).parent().hide();
});
于 2012-07-24T00:20:38.617 回答
0

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

于 2012-07-24T00:26:47.950 回答