Question

我有一个非常简单的脚本翻转div onclick：

jQuery(document).ready(function(){
    jQuery('a.flip').click(function(event){
        jQuery('.passbook').toggleClass('rotate-3d');
        event.preventDefault();
    });
});

我遇到的问题是在页面上有20个具有相同翻转效果的div。

我需要修改它，以便每个div独立翻转。

此外，当div翻转时，它会切换另一个div的可见性。目前，切换可见性由html中的onclick事件处理，这不是一个优雅的解决方案，因此我需要将该onclick事件移动到切换脚本中。

切换脚本是::

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'block')
        e.style.display = 'none';
    else
        e.style.display = 'block';
}

这适用于CD音乐播放器和购物车。

我想要做的是将这两个单独的脚本合并为一个，在jQuery noconflict中，这样每个div将独立于另一个div翻转，每个翻转将切换div的可见性与关于CD的“更多信息”单击/翻转，以及HTML中的onclick事件不处理切换事件。

这是HTML：

<div id="row1">
    <div class="cover-art">
        <section class="passbook">
            <div class="card front">
                <img src="front1.jpg" width="180px" height="180px">
                <a href="#" class="info flip" onclick="toggle_visibility('cd01');">i</a>
            </div>
            <div class="card back">
                <img src="back1.jpg" width="180px" height="180px">
                <a href="#" class="close flip" onclick="toggle_visibility('cd01');">x</a>
            </div>
        </section>
        <div class="cd-name">
            <h6 class="truncate uppercase">2 concerto de Mozart et Beethoven</h6>
        </div>
    </div>
    <div class="cover-art">
        <section class="passbook">
            <div class="card front">
                <img src="front2.jpg" width="180px" height="180px">
                <a href="#" class="info flip" onclick="toggle_visibility('cd02');">i</a>
            </div>
            <div class="card back">
                <img src="back2.jpg" width="180px" height="180px">
                <a href="#" class="close flip" onclick="toggle_visibility('cd02');">x</a>
            </div>
        </section>
        <div class="cd-name">
            <h6 class="truncate uppercase">Johann Sebastien Bach - L’Art de la Fugue</h6>
        </div>
    </div>
    <div class="cover-art">
        <section class="passbook">
            <div class="card front">
                <img src="front3.jpg" width="180px" height="180px">
                <a href="#" class="info flip" onclick="toggle_visibility('cd03');">i</a>
            </div>
            <div class="card back">
                <img src="back3.jpg" width="180px" height="180px">
                <a href="#" class="close flip" onclick="toggle_visibility('cd03');">x</a>
            </div>
        </section>
        <div class="cd-name">
            <h6 class="truncate uppercase">Les Béatitudes - Paroles et Musique</h6>
        </div>
    </div>
</div>
<div class="clear"></div>
<div id="cd01" class="cd-details">
    <h6 class="uppercase white">2 concerto de Mozart et Beethoven</h6>
    <img class="largeart" src="front1-lg.jpg" width="230px" height="230px" align="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="clear"></div>
<div id="cd02" class="cd-details">
    <h6 class="uppercase white">Johann Sebastien Bach - L’Art de la Fugue</h6>
    <img class="largeart" src="front2-lg.jpg" width="230px" height="230px" align="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="clear"></div>
<div id="cd03" class="cd-details">
    <h6 class="uppercase white">Les Béatitudes - Paroles et Musique</h6>
    <img class="largeart" src="front3-lg.jpg" width="230px" height="230px" align="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="clear"></div>

这是CSS：

.cover-art {
    display: inline-block;
}
.cd-name {
    width: 180px;
}
.cd-details {
    display: none;
    background-color: @resonnanceGreen;
    color: @white;
    padding: 10px 0 10px 10px;
    margin-bottom: 20px;
    overflow: hidden;
}
.largeart {
    padding-left: 15px !important;
    margin-right: -50px;
}
.truncate {
    width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.passbook {
    position: relative;
    width: 180px;
    height: 180px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
    display: inline-block;
}
.card {
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}
.front {
    z-index: 1;
    .info {
        width: 18px;
        height: 18px;
        border-radius: 21px;
        font-family: @menuFontFamily;
        font-style: italic;
        font-weight: 700;
        background-color: @white;
        color: @resonnanceGreen;
        text-align: center;
        position: absolute;
        right: 10px;
        bottom: 15px;
        font-size: 11px;
        line-height: 18px;
        display: block;
        text-decoration: none;
        border: 1px solid @resonnanceGreen;
    }
}
.back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    .nav {
        padding: 0;
        margin: 0;
        color: #fff;
        font-size: 12px;
        width: 100%;
        font-weight: bold;
    }
    .close {
        width: 18px;
        height: 18px;
        border-radius: 21px;
        font-family: @menuFontFamily;
        font-style: italic;
        font-weight: 700;
        background-color: @white;
        color: @resonnanceGreen;
        text-align: center;
        position: absolute;
        right: 10px;
        bottom: 15px;
        font-size: 11px;
        line-height: 18px;
        display: block;
        text-decoration: none;
        border: 1px solid @resonnanceGreen;
    }
}
.button {
    &.done {
        right: 10px;
    }
}
.rotate-3d {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

您可以在此处查看结果：http://resdemo.ergonomiq.net/en/shop

有人可以帮助我做出必要的改变来实现：

在jQuery noconflict模式下将两个脚本合并为一个
让每个div独立翻转。
将onclick="toggle_visibility('cd01');事件处理程序移出html并将触发器置于javascript中

Answer 1

1）您可以跳过toggleVisibility功能，改为使用：

$('#cd01').toggle();

2）要获得所点击代码的父.passbook，请使用：

$(this).closest('.passbook');

3）向父data添加任意.passbook属性并使用该属性定位div：

<section class="passbook" data-visibility="cd01">
...
</section>

我把它全部总结为一个小提琴：http://jsfiddle.net/4PPQg/7/

具有关联切换可见性的多个flip div实例

1 个答案: