1

我有一个非常简单的脚本可以翻转 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 的可见性，其中包含有关单击的 CD 的“更多信息” on/flipped，并且切换事件不是由 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 中
4

1 回答 1

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/

于 2013-08-04T09:08:24.747 回答