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 回答