Question

我有一个<li>的列表我想知道如何点击并选择它们以推送到我的阵列。

例如，

          <li class="browser_list">
            <ul>
              <li id="config_3"> Chrome 29</li>
              <li id="config_4"> Chrome 31</li>
              <li id="config_5"> Chrome 33</li>
              <li id="config_6"> Chrome 35</li>
            </ul>
          </li>

数组：

arr = [];

根据点击次数

，大小0-4会有所不同

我希望能够选择或取消选择（突出显示）并将config_3，config_4，config_5，config_6添加到数组中供以后使用。

Answer 1

arr = []
$("#browser_list > ul").click(function(event){
    if($(event.target).is("li")){
       arr.push(event.target)
     }
})

Answer 2

切换类并检查数组：

var arr = [];
$(".browser_list ul li").click(function() {
    $(this).toggleClass("active"); //add / remove class active;

    var index = arr.indexOf(this.id)
    if (index > -1) arr.splice(index, 1);
    else arr.push(this.id)
});

小提琴：http://jsfiddle.net/2ymwdvrn/

或者如果您需要稍后获取ID列表并且不想保留全局数组：

var arr = $(".browser_list ul li.active").map(function() {
    return this.id;
}).get();

Answer 3

你必须这样做：

＆＃13;

$(function(){

  $(".browser_list li").click(function(){
       
        var arr = new Array();

       $(this).toggleClass("selected");
    
    $(".browser_list .selected").each(function(){
       
       arr.push(this.id);
    
    })
  
  })

})

＆＃13;

.selected
{
  background:red;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <li class="browser_list">
            <ul>
              <li id="config_3"> Chrome 29</li>
              <li id="config_4"> Chrome 31</li>
              <li id="config_5"> Chrome 33</li>
              <li id="config_6"> Chrome 35</li>
            </ul>
          </li>

＆＃13;

Answer 4

这是纯Javascript中的解决方案。

除了下面的代码片段之外，这里有同样的小提琴：http://jsfiddle.net/7qxs6hgj/

var list = document.getElementById('browser_list');
var items = list.getElementsByTagName('li');

var arr = [];

for (var i = 0; i < items.length; i++)
{
    items[i].onclick = function(event)
    {
        if (this.className == 'selected')
        {
            this.className = 'unselected';
            var idx = arr.indexOf(this.id);
            if (idx >= 0)
                arr.splice(idx, 1);
        }
        else
        {
            this.className = 'selected';
            arr[arr.length] = this.id;
        }
        document.getElementById('arr').innerHTML = JSON.stringify(arr);
    };
}

#browser_list li { cursor: pointer; }
.selected { background-color: #cccccc; }
.deselected { background-color: transparent; }

<ul id='browser_list'>
    <li id="config_3"> Chrome 29</li>
    <li id="config_4"> Chrome 31</li>
    <li id="config_5"> Chrome 33</li>
    <li id="config_6"> Chrome 35</li>
</ul>
<div id='arr'></div>

选择<li>添加到数组</li>

4 个答案: