javascript - 在行内 block 包装行下方添加一个 div - 第 2 部分

Question

@musicnothing 在较旧的 thread 中建议的解决方案在行内 div 下方显示一个内容 div，当 div.wrapblock 本身被点击时，这很有效。

http://jsfiddle.net/SYJaj/7/

function placeAfter($block) {
    $block.after($('#content'));
}

$('.wrapblock').click(function() {
    $('#content').css('display','inline-block');
    var top = $(this).offset().top;
    var $blocks = $(this).nextAll('.wrapblock');
    if ($blocks.length == 0) {
        placeAfter($(this));
        return false;
    }
    $blocks.each(function(i, j) {
        if($(this).offset().top != top) {
            placeAfter($(this).prev('.wrapblock'));
            return false;
        } else if ((i + 1) == $blocks.length) {
            placeAfter($(this));
            return false;
        }
    });
});

我遇到的问题。 我需要触发相同的效果，但需要将点击事件添加到 wrapblock 本身内的链接。

我的代码几乎相同。

我改变的是点击事件句柄，从 $('.wrapblock').click(function() 到 $('.more').on('click ', function() 我还需要为内容 div 添加 .closest(".wrapblock") 以将其自身定位在 wrapblock 之外。

$('.more').on('click', function() {
...
if ($blocks.length == 0) {
        placeAfter($(this).closest(".wrapblock"));
        return false;
    }

万物皆可看可测http://jsfiddle.net/7Lt1hnaL/

如果有人能阐明我如何使用偏移方法计算它需要跟随哪个 block ，那就太好了，在此先感谢。

如您在最新的 fiddle 示例中所见，内容 div 未显示在 div 行下方。

我也很抱歉，我想在讨论的线程上发帖，但我的发帖名气很小，不允许我发帖，谢谢。

Answer 1

var $chosen = null;
var $allBlocks = [];
$(function(){
	$allBlocks = $('.wrapblock');
})

$(window).on('resize', function() {
    if ($chosen != null) {
        $('#content').css('display','none');
        $('body').append($('#content'));
        $chosen.trigger('click');   
    }
});

$('.more').on('click', function() {
    $chosen = $(this);
    var position = $chosen.parent('.wrapblock').position();
    $('#content').css('display','inline-block');
    $allBlocks.filter(function(idx, ele){
    	return $(ele).position().top == position.top;
    })
    .last()
    .after($('#content'));
});

.wrapblock
{
    background: #963a3a;
    display: inline-block;
    width: 90px;
    height: 90px;
    color: white;
    font-size: 14px;
    text-align: left;
    padding: 10px;
    margin: 10px;
    vertical-align:top;
    position:relative;
}

#content
{
    display:none;
    vertical-align:top;
    width:100%;
    background: #5582c1;
    font-size: 12px;
    color: white;
    padding: 10px;
}
.more {
    position:absolute;
    bottom:15px;
    right:15px;
    cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="wrapblock">1
<span class="more" data-ref="1">more</span>
</div>
<div class="wrapblock">2
<span class="more" data-ref="2">more</span>
</div>
<div class="wrapblock">3
<span class="more" data-ref="3">more</span>
</div>
<div class="wrapblock">4
<span class="more" data-ref="4">more</span>
</div>
<div class="wrapblock">5
<span class="more" data-ref="5">more</span>
</div>
<div class="wrapblock">6
<span class="more" data-ref="6">more</span>
</div>
<div class="wrapblock">7
<span class="more" data-ref="7">more</span>
</div>
<div class="wrapblock">8
<span class="more" data-ref="8">more</span>
</div>
<div class="wrapblock">9
<span class="more" data-ref="9">more</span>
</div>
<div id="content">Some Content</div>

似乎做你想做的。基本上，它只是将所有 block 的集合过滤到您单击的 block 的行，假设它们都具有相同的垂直偏移(顶部)，然后取最后一个，因为 jQuery 会将它们保存在文档中顺序，所以这将是布局行中的最后一个。

哦，我更新了 fiddle http://jsfiddle.net/7Lt1hnaL/1/