Question

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

Answer 1

除了Musa的评论，ids应该是唯一的，你就是在思考这个问题。您不需要父类，您可以直接与父级进行交互。

将flip ID更改为类：

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

Answer 2

同意上述内容：http://jsfiddle.net/TNwYE/

获得父类别

2 个答案: