javascript - 使用 Jquery 通过鼠标单击进行单选，使用 CTRL + 单击 div 内的图像进行多选

Question

这里有情况!我在一个 div 中有多个图像。单击图像时，它应该切换选择和取消选择之类的东西，但一次只能在 Click 事件中选择一张图像或不选择任何图像。

现在，当使用 CTRL+Click 时，我应该也可以选择/切换其他图像，比如多选。

以下是我的单选代码

jQuery toggleClass with single select on - on both left click and right click

    $(document).on('click', '#snapshotsRpt img', function(e) {
    e.preventDefault;
    $('#snapshotsRpt img.htmlView_img_select_toggle').not(this).removeClass('htmlView_img_select_toggle');
    $(this).toggleClass('htmlView_img_select_toggle');
});

$(document).on('mousedown', '#snapshotsRpt img', function(e){
    if(e.which == 3){
        e.preventDefault;
        $('#snapshotsRpt img.htmlView_img_select_toggle').removeClass('htmlView_img_select_toggle');
        $(this).addClass('htmlView_img_select_toggle');
    }
});

这是我尝试为 ctrl-click 做的，但有些地方不太对。

    $(document).on('click', '#snapshotsRpt img', function(e) {
  e.preventDefault;
  // To detect ctrl + click
  if(e.ctrlKey) {
    //alert("need to select multiple");
    $(this).toggleClass('htmlView_img_select_toggle');
  }
});

任何方向都会有所帮助。谢谢!

Answer 1

下面是演示

$(document).ready(function () {
    $(".selectOption").click(function (e) {
        if (e.ctrlKey) {
            $(this).toggleClass("selected");
        } else {
            if ($(this).hasClass("selected")) {
                $(".selectOption").removeClass("selected");

            } else {
                $(".selectOption").removeClass("selected");
                $(this).addClass("selected");
            }

        }
    });
});

.selectOption{
    height:30px;
    width:30px;
    background:red;
    margin-bottom:2px;
}

.selected{
 background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectOption"></div>
<div class="selectOption"></div>
<div class="selectOption"></div>
<div class="selectOption"></div>
<div class="selectOption"></div>