javascript - トグルの可視性が関連付けられたフリップ div の複数のインスタンス

Question

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ミュージックプレーヤーとショッピングカート用です。

私がやりたいのは、これらの 2 つの別々のスクリプトを jQuery noconflict で 1 つに結合して、各 div が互いに独立して反転し、各反転がクリックされた CD に関する「詳細情報」で div の可視性を切り替えることです。 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

誰かが達成するために必要な変更を行うのを手伝ってくれますか?

jQuery noconflict モードで 2 つのスクリプトを 1 つにマージします。
各 div を個別に反転させます。
onclick="toggle_visibility('cd01');イベントハンドラーを HTML の外に移動し、トリガーを JavaScript に配置します。

score 1 · Accepted Answer

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/

javascript - トグルの可視性が関連付けられたフリップ div の複数のインスタンス

1 に答える 1

Related

Reference