javascript - 使用 Shift 键选择多个 div

Question

我正在尝试使用 Shift 键选中的所有复选框，例如 Gmail Shift + 鼠标单击。一对一正在工作，它是一个 div。但是当我添加 shift key 代码时，它不起作用。

<小时/>

更改:

快完成了。当我单击第一个，然后按 Shift 键，然后单击第 5 个时，所有已选中，但是当我单击第 3 个时，出现问题。!直到第 5 到第 3 日才取消检查。

let held = false;
		let indexes = {start: null, end: null};
		let start = false;
		document.onkeydown = function(e) {
			if(e.keyCode == 16) {
				held = true;
			}
		}
		document.onkeyup = function(e) {
			if(e.keyCode == 16) {
				held = false;
			}
		}
		$(document).on('click','.dropCheckBox',function(){
			$(this).parents(".capturesGrid").toggleClass('selected');
			$(this).toggleClass('active');
			if($(".grid-view .selected").length > 0) 
			{
				$(this).parents(".grid-view").addClass('checking');
				$(".options-bar").addClass('allSection');
				$(".iconActions").removeClass('d-none');
				$(".allsec-det").addClass('allSection-det');
				
			}
			else 
			{
				$(this).parents(".grid-view").removeClass('checking');
				$(".options-bar").removeClass('allSection');
				$(".iconActions").addClass('d-none');
				$(".allsec-det").removeClass('allSection-det');
			}
			if(held) {
				indexes.end = $(this).data('index');
				if(indexes.start) {
					console.log(indexes);
					if(indexes.end < indexes.start) {
						$('.dropCheckBox').each(function(index, item) {
							item = $(item);
							if(!$(this).hasClass('active')) {
								if(item.data('index') && item.data('index') < indexes.start && item.data('index') > indexes.end) {
									if(!item.hasClass('active')) {
										item.addClass('active');
										$(this).parents(".grid-view").addClass('checking');
										$(this).parents(".capturesGrid").toggleClass('selected');
									}
								}
							} else {
								if(item.data('index') && item.data('index') < indexes.start && item.data('index') > indexes.end) {
									if(item.hasClass('active')) {
										item.removeClass('active');										
										$(this).parents(".grid-view").removeClass('checking');
										$(this).parents(".capturesGrid").toggleClass('selected');
									}
								}
							}
						});
					}
				} else {
					$('.dropCheckBox').each(function(index, item) {
					item = $(item);
					if(!$(this).hasClass('active')) {
						if(item.data('index') && item.data('index') < indexes.end) {
							if(!item.hasClass('active')) {
								item.addClass('active');
								$(this).parents(".grid-view").addClass('checking');
								$(this).parents(".capturesGrid").toggleClass('selected');
							}
						}
					} else {
						if(item.data('index') && item.data('index') < indexes.end) {
							if(item.hasClass('active')){
								item.removeClass('active');
								$(this).parents(".grid-view").removeClass('checking');
								$(this).parents(".capturesGrid").toggleClass('selected');
							}
						}
					}
				})
				}
				indexes = {start: null, end: null};
				start = false;
				
			} else {
				indexes.start = $(this).data('index');
			}
			
		});

.dropCheckBox {

    position: static;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: rgba(0,0,0,0.7);
    cursor: pointer;
    border: 2px solid #fff;
    transition: all .2s ease;

}

.dropCheckBox.active {
    background: linear-gradient(0deg, #214fc6, #4574ec);
    border: none;
}

.capturesGrid .dropCheckBox {

    position: absolute;
    top: 10px;
    left: 10px;
    opacity: 1;
    z-index: 2;

}
.dropCheckBox .icon {

    width: 13px;
    height: 13px;
    fill: #dee3eb;

}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="grids-row">
<div class="row">
  <div class="col">
   <div class="capturesGrid">
    <div data-index="0" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="1" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="2" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="3" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="4" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="5" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="6" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="7" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="8" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>

</div>
</div>

Answer 1

您可以使用复选框，您可以找到不同的答案here

$(document).ready(function() {
    var $chkboxes = $('.dropCheckBox');
    var lastChecked = null;
    
    $chkboxes.click(function(e) {
    $(this).parents(".capturesGrid").toggleClass('selected');
			$(this).toggleClass('active');
      
        if(!lastChecked) {
            lastChecked = this;
            return;
        }
       
        if(e.shiftKey) {
        $(this).removeClass('active');
            var start = $chkboxes.index(this);
            var end = $chkboxes.index(lastChecked);
           
           

			 $chkboxes.slice(Math.min(start,end)+1, Math.max(start,end)+1).toggleClass('active');
      	
 
        }

        lastChecked = this;
    });
});

.dropCheckBox {

    position: static;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: rgba(0,0,0,0.7);
    cursor: pointer;
    border: 2px solid #fff;
    transition: all .2s ease;

}

.dropCheckBox.active {
    background: linear-gradient(0deg, #214fc6, #4574ec);
    border: none;
}

.capturesGrid .dropCheckBox {

    position: absolute;
    top: 10px;
    left: 10px;
    opacity: 1;
    z-index: 2;

}
.dropCheckBox .icon {

    width: 13px;
    height: 13px;
    fill: #dee3eb;

}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="grids-row">
<div class="row">
  <div class="col">
   <div class="capturesGrid">
    <div data-index="1" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="2" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="3" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="4" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="5" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="6" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="7" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="8" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="9" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>

</div>
</div>