javascript - 单击时突出显示一组 Div

Question

我有一组 DIV 在列表中，我想根据用户点击的位置突出显示该组。这是我的意思的一个例子。

<div id="messageBubbleArea">

    <div class="fromThem msgBubble">
        <span class="msgName">+12125551212</span><br>
           Happy There!<br>
        <span class="msgDate">Jan 1, 2014</span>
    </div>
    <div class="clearfix"></div> 

    <div class="fromThem msgBubble">
        <span class="msgName">+12015553434</span><br>
        Hope you all are having a fun day!<br>
        <span class="msgDate">Jan 1, 2014</span>
    </div>
    <div class="clearfix"></div>

</div>

这里的想法是，我应该能够选择一个将标记为起点的消息气泡，然后选择将标记为终点的第二个消息气泡，然后突出显示两者之间的所有 div点。

这里有一个挑战。每个消息气泡要么向右浮动，要么向左浮动，因此仅向 div 添加高亮显示是行不通的，因为它不会一直延伸到主“messageBubbleArea”容器。

所以。既然如此，我将如何突出显示“msgBubble”div 的选择以显示一堆选定的对话气泡？我想设置一个开始和一个结束，然后在选择结束时向那些特定的气泡添加一个父 div，这些气泡上会设置一个高亮显示，但它看起来很麻烦，我不确定这是正确的方法它。有人有其他建议吗？

到目前为止，这是 JS:

 $('#messageBubbleArea').on('click', '.msgBubble', function(){

        if($('#messageBubbleArea').find('.startHere').length == 0){
            $(this).addClass('startHere');
        }
        else{
            if(!$(this).hasClass('startHere')){
                $(this).addClass('endHere');
            }
        }
    });

编辑:这是一个 JsFiddle..... https://jsfiddle.net/30nLueae/

谢谢!

Answer 1

更新:刚刚找到了一个具有更好可读性的解决方案。

我想我解决了，检查 fiddle here .. 请记住，startHere 可能在 endHere 下。既然你没有提到这一点，那么我假设你错过了那个案例。

var start = 0;
$('#messageBubbleArea').on('click', '.msgBubble', function() {
  if ($('#messageBubbleArea').find('.startHere').length == 0) {
    $(this).addClass('startHere');
    $(this).css('background-color', 'gray');
    start = parseInt($(this).attr('messageid'), 10);
  } else {
    if (!$(this).hasClass('startHere')) {
      $(this).addClass('endHere');
      var cur = $(this);
      while(!cur.hasClass('startHere')){
        cur.css('background-color', 'gray');

        //if endHere is below startHere, change cur to previous .msgBubble div
      	if( parseInt(cur.attr('messageid'), 10) > start){
            cur = cur.prev().prev();
        }else{
            cur = cur.next().next();
        }
      }
    }
  }
});