单击突出显示一组Divs

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

更新：刚刚发现了一个更好的可读性的解决方案。

我想我解决了它，检查小提琴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 
 
     \t if(parseInt(cur.attr('messageid'), 10) > start){ 
 
      cur = cur.prev().prev(); 
 
     }else{ 
 
      cur = cur.next().next(); 
 
     } 
 
     } 
 
    } 
 
    } 
 
});

Answer 2

只是检查这一项是否与你的要求或不走了。

Here is the js fiddle link

如果你想开始节点蓝色，终端节点绿色和黄色选择的节点，那么这是你的JavaScript

var started = false; 
var startEl; 
$('.msgBubble').on('click', function(e) { 
    e.stopPropagation(); 
     if ($(this).hasClass('startHere')) { 
      started = false; 
      startEl = null; 
      $(this).removeClass('startHere'); 
     } else { 
      if (started) { 
        $(this).parent().find('.msgBubble').removeClass('endHere selectHere'); 
       var endEl = this; 
       var els = $(this).parent().find('.msgBubble'); 
       startIndex = els.index(startEl); 
       endIndex = els.index(endEl); 
       $(this).addClass('endHere'); 
       if (startIndex > endIndex) { 
        for (var i = endIndex + 1; i < startIndex; i++) { 
         $(els[i]).addClass('selectHere'); 
        } 
       } else { 
        for (var i = startIndex + 1; i < endIndex; i++) { 
         $(els[i]).addClass('selectHere'); 
        } 
       } 
      } else { 
       $(this).addClass('startHere'); 
       startEl = this; 
       started = true; 
      } 
     } 
}); 
$('#messageBubbleArea').on('click', function() { 
    $(this).find('.msgBubble').removeClass('startHere endHere selectHere'); 
    started = false; 
    startEl = null; 
}); 

如果你希望所有在相同颜色的选择的节点

var started = false; 
var startEl; 
$('.msgBubble').on('click', function(e) { 
    e.stopPropagation(); 
     if ($(this).hasClass('startHere')) { 
      $(this).removeClass('startHere'); 
      started = false; 
      startEl = null; 
     } else { 
      if (started) { 
        $(this).parent().find('.msgBubble').removeClass('endHere selectHere'); 
       var endEl = this; 
       var els = $(this).parent().find('.msgBubble'); 
       startIndex = els.index(startEl); 
       endIndex = els.index(endEl); 
       $(this).addClass('endHere'); 
       $(startEl).addClass('endHere'); 
       if (startIndex > endIndex) { 
        for (var i = endIndex + 1; i < startIndex; i++) { 
         $(els[i]).addClass('endHere'); 
        } 
       } else { 
        for (var i = startIndex + 1; i < endIndex; i++) { 
         $(els[i]).addClass('endHere'); 
        } 
       } 
      } else { 
       $(this).addClass('startHere'); 
       startEl = this; 
       started = true; 
      } 
     } 
}); 
$('#messageBubbleArea').on('click', function() { 
    $(this).find('.msgBubble').removeClass('startHere endHere selectHere'); 
    started = false; 
    startEl = null; 
}); 

var started = false; 
 
var startEl; 
 
$('.msgBubble').on('click', function(e) { 
 
    e.stopPropagation(); 
 
     if ($(this).hasClass('startHere')) { 
 
      $(this).removeClass('startHere'); 
 
      started = false; 
 
      startEl = null; 
 
     } else { 
 
      if (started) { 
 
        $(this).parent().find('.msgBubble').removeClass('endHere selectHere'); 
 
       var endEl = this; 
 
       var els = $(this).parent().find('.msgBubble'); 
 
       startIndex = els.index(startEl); 
 
       endIndex = els.index(endEl); 
 
       $(this).addClass('endHere'); 
 
       $(startEl).addClass('endHere'); 
 
       if (startIndex > endIndex) { 
 
        for (var i = endIndex + 1; i < startIndex; i++) { 
 
         $(els[i]).addClass('endHere'); 
 
        } 
 
       } else { 
 
        for (var i = startIndex + 1; i < endIndex; i++) { 
 
         $(els[i]).addClass('endHere'); 
 
        } 
 
       } 
 
      } else { 
 
       $(this).addClass('startHere'); 
 
       startEl = this; 
 
       started = true; 
 
      } 
 
     } 
 
}); 
 
$('#messageBubbleArea').on('click', function() { 
 
    $(this).find('.msgBubble').removeClass('startHere endHere selectHere'); 
 
    started = false; 
 
    startEl = null; 
 
});

#messageBubbleArea { 
 
    font: 14px Arial; 
 
    margin-top: 104px; 
 
    max-height: 694px; 
 
    min-height: 694px; 
 
    overflow-y: scroll; 
 
    padding: 0 10px; 
 
    width: 99%; 
 
} 
 

 
.fromThem::before { 
 
    border-bottom: 10px solid #e5e5ea; 
 
    border-left: 9px solid rgba(0, 0, 0, 0); 
 
    bottom: 0; 
 
    content: ""; 
 
    left: -5px; 
 
    position: absolute; 
 
} 
 

 
.fromThem { 
 
    background-color: #e5e5ea; 
 
    border-radius: 8px 8px 8px 0; 
 
    color: #000000; 
 
    float: left; 
 
    margin-right: auto; 
 
    cursor: pointer; 
 
} 
 

 
.fromThem, .fromMe { 
 
    clear: both; 
 
    margin-top: 20px; 
 
    max-width: 80%; 
 
    padding: 5px 9px; 
 
    position: relative; 
 
} 
 

 
#messageBubbleArea { 
 
    font: 14px Arial; 
 
} 
 

 
.msgName { 
 
    font-size: 9px; 
 
} 
 

 
.msgDate { 
 
    font-size: 9px; 
 
} 
 
.startHere { 
 
    background-color: #1e90ff; 
 
} 
 
.startHere::before { 
 
    border-bottom-color: #1e90ff; 
 
} 
 
.endHere { 
 
    background-color: #40ffd5; 
 
} 
 
.endHere::before { 
 
    border-bottom-color: #40ffd5; 
 
} 
 
.selectHere { 
 
    background-color: yellow; 
 
} 
 
.selectHere::before { 
 
    border-bottom-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="messageBubbleArea"> 
 
    <div deliveredstamp="1397995207" messageid="782" class="fromThem msgBubble"> 
 
    <span class="msgName">+15515875678</span><br> 
 
    Happy Hoppy Easter!<br> 
 
    <span class="msgDate">Jan 1, 2001</span> 
 
    </div> 
 
    <div class="clearfix"></div> 
 
    <div deliveredstamp="1398020299" messageid="783" class="fromThem msgBubble"> 
 
    <span class="msgName">+13475319684</span><br> 
 
    Hope you all are having a fun day!<br> 
 
    <span class="msgDate">Jan 1, 2001</span> 
 
    </div> 
 
    <div class="clearfix"></div> 
 
    <div deliveredstamp="1398029166" messageid="784" class="fromThem msgBubble"> 
 
    <span class="msgName">Mom </span><br> 
 
    Happy Easter<br> 
 
    <span class="msgDate">Jan 1, 2001</span> 
 
    </div><div class="clearfix"></div> 
 
    <div deliveredstamp="1398029166" messageid="784" class="fromThem msgBubble"> 
 
    <span class="msgName">Mom </span><br> 
 
    Happy Easter<br> 
 
    <span class="msgDate">Jan 1, 2001</span> 
 
    </div><div class="clearfix"></div> 
 
    <div deliveredstamp="1398029166" messageid="784" class="fromThem msgBubble"> 
 
    <span class="msgName">Mom </span><br> 
 
    Happy Easter<br> 
 
    <span class="msgDate">Jan 1, 2001</span> 
 
    </div><div class="clearfix"></div> 
 
    <div deliveredstamp="1398029166" messageid="784" class="fromThem msgBubble"> 
 
    <span class="msgName">Mom </span><br> 
 
    Happy Easter<br> 
 
    <span class="msgDate">Jan 1, 2001</span> 
 
    </div><div class="clearfix"></div> 
 
    <div deliveredstamp="1398029166" messageid="784" class="fromThem msgBubble"> 
 
    <span class="msgName">Mom </span><br> 
 
    Happy Easter<br> 
 
    <span class="msgDate">Jan 1, 2001</span> 
 
    </div><div class="clearfix"></div> 
 
</div>

var started = false; 
 
var startEl; 
 
$('.msgBubble').on('click', function(e) { 
 
\t e.stopPropagation(); 
 
     if ($(this).hasClass('startHere')) { 
 
      $(this).removeClass('startHere'); 
 
      started = false; 
 
      startEl = null; 
 
     } else { 
 
      if (started) { 
 
      \t \t $(this).parent().find('.msgBubble').removeClass('endHere selectHere'); 
 
       var endEl = this; 
 
       var els = $(this).parent().find('.msgBubble'); 
 
       startIndex = els.index(startEl); 
 
       endIndex = els.index(endEl); 
 
       $(this).addClass('endHere'); 
 
       if (startIndex > endIndex) { 
 
        for (var i = endIndex + 1; i < startIndex; i++) { 
 
         $(els[i]).addClass('selectHere'); 
 
        } 
 
       } else { 
 
        for (var i = startIndex + 1; i < endIndex; i++) { 
 
         $(els[i]).addClass('selectHere'); 
 
        } 
 
       } 
 
      } else { 
 
       $(this).addClass('startHere'); 
 
       startEl = this; 
 
       started = true; 
 
      } 
 
     } 
 
}); 
 
$('#messageBubbleArea').on('click', function() { 
 
\t $(this).find('.msgBubble').removeClass('startHere endHere selectHere'); 
 
    started = false; 
 
    startEl = null; 
 
});

#messageBubbleArea { 
 
    font: 14px Arial; 
 
    margin-top: 104px; 
 
    max-height: 694px; 
 
    min-height: 694px; 
 
    overflow-y: scroll; 
 
    padding: 0 10px; 
 
    width: 99%; 
 
} 
 

 
.fromThem::before { 
 
    border-bottom: 10px solid #e5e5ea; 
 
    border-left: 9px solid rgba(0, 0, 0, 0); 
 
    bottom: 0; 
 
    content: ""; 
 
    left: -5px; 
 
    position: absolute; 
 
} 
 

 
.fromThem { 
 
    background-color: #e5e5ea; 
 
    border-radius: 8px 8px 8px 0; 
 
    color: #000000; 
 
    float: left; 
 
    margin-right: auto; 
 
    cursor: pointer; 
 
} 
 

 
.fromThem, .fromMe { 
 
    clear: both; 
 
    margin-top: 20px; 
 
    max-width: 80%; 
 
    padding: 5px 9px; 
 
    position: relative; 
 
} 
 

 
#messageBubbleArea { 
 
    font: 14px Arial; 
 
} 
 

 
.msgName { 
 
    font-size: 9px; 
 
} 
 

 
.msgDate { 
 
    font-size: 9px; 
 
} 
 
.startHere { 
 
    background-color: #1e90ff; 
 
} 
 
.startHere::before { 
 
    border-bottom-color: #1e90ff; 
 
} 
 
.endHere { 
 
    background-color: #40ffd5; 
 
} 
 
.endHere::before { 
 
    border-bottom-color: #40ffd5; 
 
} 
 
.selectHere { 
 
    background-color: yellow; 
 
} 
 
.selectHere::before { 
 
    border-bottom-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div id="messageBubbleArea"> 
 
    <div deliveredstamp="1397995207" messageid="782" class="fromThem msgBubble"> 
 
    <span class="msgName">+15515875678</span><br> 
 
    Happy Hoppy Easter!<br> 
 
    <span class="msgDate">Jan 1, 2001</span> 
 
    </div> 
 
    <div class="clearfix"></div> 
 
    <div deliveredstamp="1398020299" messageid="783" class="fromThem msgBubble"> 
 
    <span class="msgName">+13475319684</span><br> 
 
    Hope you all are having a fun day!<br> 
 
    <span class="msgDate">Jan 1, 2001</span> 
 
    </div> 
 
    <div class="clearfix"></div> 
 
    <div deliveredstamp="1398029166" messageid="784" class="fromThem msgBubble"> 
 
    <span class="msgName">Mom </span><br> 
 
    Happy Easter<br> 
 
    <span class="msgDate">Jan 1, 2001</span> 
 
    </div><div class="clearfix"></div> 
 
    <div deliveredstamp="1398029166" messageid="784" class="fromThem msgBubble"> 
 
    <span class="msgName">Mom </span><br> 
 
    Happy Easter<br> 
 
    <span class="msgDate">Jan 1, 2001</span> 
 
    </div><div class="clearfix"></div> 
 
    <div deliveredstamp="1398029166" messageid="784" class="fromThem msgBubble"> 
 
    <span class="msgName">Mom </span><br> 
 
    Happy Easter<br> 
 
    <span class="msgDate">Jan 1, 2001</span> 
 
    </div><div class="clearfix"></div> 
 
    <div deliveredstamp="1398029166" messageid="784" class="fromThem msgBubble"> 
 
    <span class="msgName">Mom </span><br> 
 
    Happy Easter<br> 
 
    <span class="msgDate">Jan 1, 2001</span> 
 
    </div><div class="clearfix"></div> 
 
    <div deliveredstamp="1398029166" messageid="784" class="fromThem msgBubble"> 
 
    <span class="msgName">Mom </span><br> 
 
    Happy Easter<br> 
 
    <span class="msgDate">Jan 1, 2001</span> 
 
    </div><div class="clearfix"></div> 
 
</div>