javascript - 具有关联切换可见性的翻转 div 的多个实例

Question

我有一个非常简单的脚本，可以在单击时翻转 div:

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

有人可以帮助我进行所需的更改以实现:

1. 在 jQuery 无冲突模式下将两个脚本合并为一个脚本
2. 让每个 div 独立翻转。
3. 将 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>

我用 fiddle 总结了这一切:http://jsfiddle.net/4PPQg/7/