js按键+鼠标控制列表选中

最新推荐文章于 2023-05-09 14:14:36 发布

TAREKtechnique

最新推荐文章于 2023-05-09 14:14:36 发布

阅读量755

点赞数 1

CC 4.0 BY-SA版权

文章标签： checkbox html js select function

本文链接：https://blog.youkuaiyun.com/qq_20773675/article/details/42015875

本文介绍了一种使用JavaScript结合Ctrl或Shift按键与鼠标操作来实现列表选择的方法，旨在提供一种类似Windows资源管理器的用户体验，提高列表操作效率。通过js代码，可以轻松实现多选和连续选中列表项。

js组合按键控制选择列表

在网页中列表展示后可以对其进行基本操作，如删除、修改等，传统的做法是用checkbox选择，操作过程麻烦，有一种操作方式更人性化，熟悉windows用户资源管理器文件操作方式一样，按Ctrl或Shift+鼠标等组合操作就可方便的选择列表：

js代码:

function hoverPinInit() {
    $(".hover").hover(
        function(){
            $(this).addClass("hovered")
        },
        function() {
            $(this).removeClass("hovered")
        }
    )
//    以下为控制组合按键选择
    $(".hover").click(function(e) {
    	var ele = $(this)
    	if(e.shiftKey){
    		var startIndex = 0 //默认开始索引
    		var listBox = ele.parent() //限制事件的范围
    		var activeE = listBox.find(".active")
    		var index1 = activeE.first().index() //得到第一次被选中的索引
    		var cIndex = ele.index() //当前被选中的索引
//    		如果没有被选中的元素则默认为从第一个开始选
    		if(index1!=-1){ 
    			startIndex = index1
    		}
    		var startI = startIndex
    		var endI = cIndex
    		if(startIndex>cIndex){
    			startI = cIndex
    			endI = startIndex
    		}
    		for(var i=startI;i<=endI;i++){
    			listBox.find(".hover").eq(i).addClass("active")
    		}
		}else if(e.ctrlKey){
    		if(ele.hasClass("active")){
    			ele.removeClass("active")
    		}else{
    			ele.addClass("active")
    		}
    	}else{
            $(".hover").removeClass("active")
			ele.addClass("active")
    	}
    })
}

HTML:

<div class="list-box">
<span style="white-space:pre">	</span><div class="list-head">
<span style="white-space:pre">		</span><div class="column c1">
<span style="white-space:pre">			</span>本地文件名
<span style="white-space:pre">		</span></div>
<span style="white-space:pre">		</span><div class="column c2">
<span style="white-space:pre">			</span>图片名称
<span style="white-space:pre">		</span></div>
<span style="white-space:pre">		</span><div class="column c3">
<span style="white-space:pre">			</span>图片
<span style="white-space:pre">		</span></div>
<span style="white-space:pre">		</span><div class="column c4">
<span style="white-space:pre">			</span>分类
<span style="white-space:pre">		</span></div>
<span style="white-space:pre">	</span></div>
<span style="white-space:pre">	</span><div class="list-body">
<span style="white-space:pre">		</span><div class="list-row hover active">
<span style="white-space:pre">			</span><div class="column c1">
<span style="white-space:pre">				</span>1418738915385.jpg
<span style="white-space:pre">			</span></div>
<span style="white-space:pre">			</span><div class="column c2">
<span style="white-space:pre">				</span><input class="form-control" placeholder="输入图片名称">
<span style="white-space:pre">			</span></div>
<span style="white-space:pre">			</span><div class="column c3">
<span style="white-space:pre">				</span><img class="col-thumbnail" src="/images_library/util/showImage.do?pathName=tempPhotos&amp;imageId=1418738915385.jpg">
<span style="white-space:pre">			</span></div>
<span style="white-space:pre">			</span><div class="column c3">
<span style="white-space:pre">				</span><select class="classify form-control">
<span style="white-space:pre">					</span><option value="5">funny</option>
<span style="white-space:pre">					</span><option value="6">face</option>
<span style="white-space:pre">				</span></select>
<span style="white-space:pre">			</span></div>
<span style="white-space:pre">		</span></div>
<span style="white-space:pre">		</span><div class="list-row hover active hovered">
<span style="white-space:pre">			</span><div class="column c1">
<span style="white-space:pre">				</span>1418738942581.jpg
<span style="white-space:pre">			</span></div>
<span style="white-space:pre">			</span><div class="column c2">
<span style="white-space:pre">				</span><input class="form-control" placeholder="输入图片名称">
<span style="white-space:pre">			</span></div>
<span style="white-space:pre">			</span><div class="column c3">
<span style="white-space:pre">				</span><img class="col-thumbnail" src="/images_library/util/showImage.do?pathName=tempPhotos&amp;imageId=1418738942581.jpg">
<span style="white-space:pre">			</span></div>
<span style="white-space:pre">			</span><div class="column c3">
<span style="white-space:pre">				</span><select class="classify form-control">
<span style="white-space:pre">					</span><option value="5">funny</option>
<span style="white-space:pre">					</span><option value="6">face</option>
<span style="white-space:pre">				</span></select>
<span style="white-space:pre">			</span></div>
<span style="white-space:pre">		</span></div>
<span style="white-space:pre">		</span><div class="list-row hover active">
<span style="white-space:pre">			</span><div class="column c1">
<span style="white-space:pre">				</span>1418738998617.jpg
<span style="white-space:pre">			</span></div>
<span style="white-space:pre">			</span><div class="column c2">
<span style="white-space:pre">				</span><input class="form-control" placeholder="输入图片名称">
<span style="white-space:pre">			</span></div>
<span style="white-space:pre">			</span><div class="column c3">
<span style="white-space:pre">				</span><img class="col-thumbnail" src="/images_library/util/showImage.do?pathName=tempPhotos&amp;imageId=1418738998617.jpg">
<span style="white-space:pre">			</span></div>
<span style="white-space:pre">			</span><div class="column c3">
<span style="white-space:pre">				</span><select class="classify form-control">
<span style="white-space:pre">					</span><option value="5">funny</option>
<span style="white-space:pre">					</span><option value="6">face</option>
<span style="white-space:pre">				</span></select>
<span style="white-space:pre">			</span></div>
<span style="white-space:pre">		</span></div>
<span style="white-space:pre">	</span></div>
</div>