在点击时突出显示一组Div

时间：2016-06-07 10:54:05

标签： javascript jquery html css

我有一组列表中的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＆＃39;在两点之间。

这里面临挑战。每个消息气泡要么向左浮动要么向左浮动，所以只是在div上添加一个突出显示将无法工作，因为它不会一直延伸到主要＆＃34; messageBubbleArea＆＃34;容器

因此。在这种情况下，我如何突出选择＆＃34; msgBubble＆＃34; 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/

谢谢！

2 个答案:

答案 0 :(得分：0)

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

我想我会解决它，检查小提琴here ..请记住，startHere可能位于endHere之下。既然你没有提到这一点，那么我认为你错过了那个案例。

＆＃13;
＆＃13; 
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();
        }
      }
    }
  }
});
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

请检查一下这是否符合您的要求。

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) {
	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');
                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;
});
#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>

相关问题
最新问题