多個實例

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/