單擊突出顯示一組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>