Javascript jQuery可选择插件

我试图使用jQuery nuSelectable插件来允许用户一次选择多个项目。但不知怎的，我无法让它做出选择。该插件来自这里：

选择时，数字应该会改变颜色，但单击时不会发生任何变化。我做错了什么

HTML:

JS:

---

谢谢你的帮助。

我想你也想要这个：

1在HTML中的.selectIconBox类中添加了.Selective类

2从CSS中删除JavaScript和.iconWrap选择{background color:6a989e；}

3将.selectable.ui选择的{背景：F39814；颜色：白色；}添加到CSS中

4将JQuery替换为$.selective.selective

$.selective.selective； .iconWrap{ 边框：2个实心101820； 边界半径：50%； 宽度：70px； 高度：70像素； 填充：17px； 边缘底部：10px； 字号：1.25em； 颜色：101820； 职位：相对 } 物品容器.iconWrap{ 光标：指针； 过渡：所有0.3秒均为0秒； } .selectIconBox{ 显示：内联块； 利润率：40像素80像素； } .selectable.ui已选择{背景：F39814；颜色：白色；} 1. 2. 3. 4.

---

您可以使用jqueryui实现它

检查这个简单的

HTML:

CSS:

---

它看起来像是在拖动项目时工作，而不是在单击项目时工作。您的代码运行良好。看小提琴：谢谢你帮我调查这件事。那么如何将其从拖动更改为单击？有什么想法吗？还有：拖拽只在你的小提琴上起作用，但在我的页面上不起作用。你做了什么不同的事情吗？很高兴它帮助了你。快速跟进问题：你知道我如何将我的代码转换成表单，在最后提交时发送所选的数字吗？是的，只需找到选择了class.ui的元素并找到相应的innerHTML或文本。听起来很简单，但我不完全明白你的意思。你能给我举个例子吗？

        <div id="item-container" class="text-center">
        <div class="row element-medium-top element-medium-bottom">
            <div class="selectIconBox ">
              <div class="item iconWrap">1</div>
              </div>
              <div class="selectIconBox ">
                  <div class="item iconWrap">2</div>
              </div>
              <div class="selectIconBox ">
                  <div class="item iconWrap">3</div>
              </div>
              <div class="selectIconBox ">
                  <div class="item iconWrap">4</div>
              </div>
            </div>
        </div>

.iconWrap-selected {
    background-color:#6a989e;
}
.iconWrap {
    border: 2px solid #101820;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    padding: 17px;
    margin-bottom:10px;
    font-size: 1.25em;
    color:#101820;
    position:relative
}
#item-container .iconWrap {
    cursor: pointer;
    transition: all 0.3s ease-in-out 0s;
}
.selectIconBox {
    display: inline-block;
    margin: 40px 80px;
}

<script src="../assets/js/jquery.nu-selectable.js"></script> 
<script>
$('#item-container').nuSelectable({
  items: '.item',
  selectionClass: 'selectIconBox',
  selectedClass: 'iconWrap-selected',
  autoRefresh: true
});
</script>

<div>
<ul class="items">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    </ul>
</div>

$(".items").selectable({filter:"li"});

.items{
    width:400;
    height:500;
    overflow:auto;
}
.item{
    color:#fff;
    height:100px;
    width:100px;
    border-radius: 50%;
    background:cyan;
    margin:15px;
    text-align:center;
    float:left;
    list-style:none;
}
.ui-selected{
    background-color:green !important;  
}