javascript - jQuery nuSelectable 插件

Question

我正在尝试使用 jQuery nuSelectable 插件来允许用户一次选择多个元素。不知何故，我无法让它做出选择。该插件来自这里:http://www.jqueryscript.net/other/jQuery-Plugin-To-Select-Multiple-Elements-with-Mouse-nuSelectable.html

在选择时，数字应该会改变颜色，但在点击时没有任何反应。我做错了什么？

HTML:

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

CSS:

.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;
}

JS:

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

感谢您的帮助。

Answer 1

我想你想要这样:

1) 添加了 .selectable沿着你的.selectIconBox上课HTML 中的类。

2) 删除了您的 JavaScript 和 .iconWrap-selected { background-color:#6a989e;}来自 CSS。

3) 添加了 .selectable .ui-selected { background: #F39814; color: white; }到您的 CSS。

4) 用 $( ".selectable" ).selectable(); 替换了您的 JQuery .

$(".selectable").selectable();

.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;
}

.selectable .ui-selected { background: #F39814; color: white; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

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

Note : You could change background-color of selection by changing value in .ui-selected class in your CSS. Also you can not change name of that particular class(i.e. .ui-selected).

来源: JQuery User Interface

更新:

跟进答案:如以下评论所述。

$(".selectable").selectable();

// Onclick on .submit class or whatever class you define. 

$(".submit").click(function()
{
  var selectedArr = []; // Declaring an Array

  $(".selectable").each(function() // Fidns each element that has .selectable class 
  {
    // Finds inside each .selectable class for .ui-slected class and on getting takes value inside it.
    var selectedNum = $(this).find('.ui-selected').text(); 
    //Converts it into Integer
    var intNum = parseInt(selectedNum);
    // If the slected value is number pushes into array.
    if (!isNaN(intNum)) {
      selectedArr.push(intNum);
    }    
  });
  alert(selectedArr); /*So now when you click on submit the Array "selectedArr" has selected Numbers*/
});

.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: 20px 80px;
}

.selectable .ui-selected { background: #F39814; color: white; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

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

<button class="submit">Submit : Alert! Selected</button>