0

各ボックス内に質問があるボックスのような形の div がいくつかあります。ユーザーがボックスを移動すると、短い回答がリンクとともに表示され、ライトボックスに長い回答を入力することが想定されています。ライトボックスに入力するそれぞれの長い回答を取得したいのですが、わからないようです。また、ライトボックス内でユーザーがすべての長い回答をスクロールできるようにしています。

私は現在、Rails パーシャルの Ruby ループからすべての HTML を生成しています。私の既存の作業の単純化された例は、こちらの jsfiddle にあります。

既存のhtml:

<div id="about">

    <div class="wsBox what">
        <div class="wsQ">
            <h1>What</h1>
        </div>

        <div class="wsD" style="display: block; display:none">
            <p>what we do short description.  <a href="#" class="lightBoxOpen">Continue Reading...</a><span class="wsFD">This is a lenghty description of what we do.</span></p>
        </div>
    </div>

    <div class="wsBox who">
        <div class="wsQ" style="display: block; ">
            <h1>Who</h1>
        </div>

        <div class="wsD">
            <p>who we are short description.  <a href="#" class="lightBoxOpen">Continue Reading...</a><span class="wsFD">This is a lenghty description of who we are.</span></p>
        </div>
    </div>

    <div style="clear:both; display: block; height: 30px; margin-bottom: 25px"></div>

    <div id="lightBoxOverlay" class="initHide" style="display: none; ">
    <div id="lightBox">
        <a href="#" class="lightBoxClose">Close</a>
        <div id="lightBoxContent"></div>
    </div>
</div>


</div>​​​​​

JS:

$(document).ready(function(){
    $('#about .wsBox').hover(
        function(){
            $(this).find('.wsQ').fadeOut();
            $(this).find('.wsD').delay(200).fadeIn();

        },
        function(){
            $(this).find('.wsD').fadeOut();
            $(this).find('.wsQ').delay(200).fadeIn();
        }

    );

    $('a.lightBoxOpen').click(function(e){
        $('#lightBoxOverlay').fadeIn();
        $(this)

    });


    $('a.lightBoxClose').click(function(e){
        $('#lightBoxOverlay').fadeOut();
    });

});

</p>

CSS:

#about{


}
.wsBox{
    padding: 5px;
    position: relative;
    border: 2px solid #669900;
    width: 200px;
    height: 150px;
    border-radius: 20px;
    float:right;
    margin: 2%;
      border-radius: 5%;
      box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
}

.wsQ{
    color: green;
    text-align: center;
    line-height: 150px;

}
.wsD{
    height:150px;
    display:none;
    position: absolute;
    top: 50%;
    margin-top:-36px;
}
.wsD .wsFD{
    display: none;
}
.who .wsD{
    margin-top:-50px;    
}

#lightBoxOverlay{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: rgba(0,0,0,0.6);

}
#lightBox{
    position: absolute;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    background-color: #ffffff;
    padding: 5px;
    border: 2px solid #669900;
    border-radius: 20px;
    margin: 2%;
    border-radius: 5%;
    box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
}
#lightBox a.lightBoxClose{
    float: right;
    font-size: .75em;
    margin-right: 10px;
}

編集 はこのようなものに取り組んでいますが、コンテンツはボックスではなくリンクです!

$('a.lightBoxOpen').click(function(e){
    $('#lightBoxOverlay').fadeIn();
    var content = $(this).html();

        $('#lightBoxContent').html(content);

});

</p>

4

1 に答える 1

0

リンクの親の html() を次のようにグラフ化します。

var content = $(this).parent().html();

またはさらに良い: var content = $(this).closest('.wsBox').html();

于 2012-11-04T17:37:08.833 に答える