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

我有一个非常简单的脚本，可以翻转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将独立于另一个进行翻转，每个翻转都将通过单击/翻转的CD的“更多信息”切换div的可见性，并且切换事件不由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>

您可以在此处看到结果：

有人能帮我做出必要的改变以实现：

在jQuery noconflict模式下将两个脚本合并为一个

让每个div独立翻转

将

onclick=“toggle_visibility（'cd01'）；

事件处理程序移出html，并使触发器位于javascript中

1）您可以跳过

切换可见性

功能，改为使用：

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

2）要仅获取所单击标记的父项

.passbook

，请使用：

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

3）将任意

数据

属性添加到父

存折

中，并使用该属性以div为目标：

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

...

我总结了这一切：

1）您可以跳过您的

切换可见性

功能，而是使用：

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

2）要仅获取所单击标记的父项

.passbook

，请使用：

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

3）将任意

数据

属性添加到父

存折

中，并使用该属性以div为目标：

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

...

---

我用小提琴总结了这一切：

这几乎是完美的。我忘了一件事。每次翻转视图中只能有一个div。因此，如果您翻转了div1，请单击（I）在div2上，这应该会自动从div1隐藏切换的div，将div1翻转到它的前面，将div2翻转到后面，并为div2切换细节div的可见性。几乎……我注意到的一件事是，单击X不会关闭切换的div并将所选div翻转到它的前面……基本上会将页面返回到所有具有前视图。我还更新了小提琴，使其前/后具有不同的占位符图像，因此更明显的是出现了翻转。此外，我希望通过向下滑动来显示切换可见性。我从您的小提琴中更新的小提琴在这里：现在关闭按钮也应该正常工作。我使信息淡入/现在退出，但我将让您自己去弄清楚eyecandy：这几乎是完美的。我忘了一件事。翻转视图中每次只能有1个div。因此，如果您翻转了div1，请单击（I）在div2上，这应该会自动从div1隐藏切换的div，将div1翻转到它的前面，将div2翻转到后面，并为div2切换细节div的可见性。几乎……我注意到的一件事是，单击X不会关闭切换的div并将所选div翻转到它的前面……基本上会将页面返回到所有具有前视图。我还更新了小提琴，使其前/后具有不同的占位符图像，因此更明显的是出现了翻转。此外，我希望通过向下滑动来显示切换可见性。我从您的小提琴中更新的小提琴在这里：现在关闭按钮也应该正常工作。我使信息淡入/现在就出来，但我会让你自己去弄清楚眼睛糖果：D