多个实例

Question

我有一个非常简单的脚本，翻转的onclick一个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的可见性，以“更多信息” 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 noconflict模式下将两个脚本合并为一个
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> 

我在小提琴总结这一切：http://jsfiddle.net/4PPQg/7/