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

以下是将要举行的演示

＆＃13;

$(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");
            }

        }
    });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

可能这不是你所期待的。但这可以解决问题。 **jQueryUI**有一个名为**Selectable**

的互动

所以结构应该是，

<ol id="selectable">
  <li class="ui-state-default">1</li>
  <li class="ui-state-default">2</li>
  <li class="ui-state-default">3</li>
  <li class="ui-state-default">4</li>
  <li class="ui-state-default">5</li>
  <li class="ui-state-default">6</li>
  <li class="ui-state-default">7</li>
  <li class="ui-state-default">8</li>
  <li class="ui-state-default">9</li>
  <li class="ui-state-default">10</li>
  <li class="ui-state-default">11</li>
  <li class="ui-state-default">12</li>
</ol>

CSS：

  #feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
  #selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }

脚本：

$(function() {
    $( "#selectable" ).selectable();
  });

工作Fiddle

单击选择使用Jquery进行单击选择，使用CTRL进行多选+单击div内的图像

2 个答案: