Javascript 使用Jquery进行鼠标单击的单选和CTRL+；单击div中的图像

这里有情况！ 我在一个div中有多个图像。单击图像时，它应该切换类似于选择和取消选择的内容，但在单击事件或无时，一次只能选择一个图像

现在，当使用CTRL+Click时，我应该能够选择/切换其他图像，类似于multi-select

下面是我的单选代码

这是我为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');
  }
});

---

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

这是一个演示，它将

$（文档）.ready（函数（）{
$（“.selectOption”）。单击（函数（e）{
如果（e.ctrlKey）{
$（此）.toggleClass（“选定”）；
}否则{
if（$（this）.hasClass（“选定”））{
$（“.selectOption”）.removeClass（“选定”）；
}否则{
$（“.selectOption”）.removeClass（“选定”）；
$（此）.addClass（“选定”）；
}
}
});
});
。选择选项{
高度：30px；
宽度：30px；
背景：红色；
边缘底部：2px；
}
.选定{
背景：绿色；
}
可能这不是您所期望的。但这可能会奏效<代码>**jQueryUI**

有一个名为

**selective**

所以结构应该是,

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

脚本：

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

---

一个有效的

这对我的情况很有效。谢谢！干杯：）

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