Splice删除多个索引

Question

我正在制作自己的过滤器系统来过滤数据，现在我正在构建基本功能，例如添加和删除过滤器。

添加过滤器工作正常，但是当我玩弄添加和删除时，有时splice删除多个过滤器。为什么这样做？这里是我的代码：

var active_filters = []; 

    var available_filters = [ 
     'first_name', 'last_name', 'city' 
    ]; 

    var filters = { 
     first_name: { 
      title: 'First Name', 
      is_active: false, 
      types: [ 
       { 
        input: 'text' 
       }, 

       { 
        input: 'select', 
        options: [ 
         'asc', 'desc' 
        ], 
        values: [ 
         'Ascending', 'Descending' 
        ] 
       } 
      ], 

     }, 

     last_name: { 
      title: 'Last Name', 
      is_active: false, 
      types: [ 
       { 
        input: 'text' 
       }, 

       { 
        input: 'select', 
        options: [ 
         'asc', 'desc' 
        ], 
        values: [ 
         'Ascending', 'Descending' 
        ] 
       } 
      ], 

     }, 

     city: { 
      title: 'City', 
      is_active: false, 
      types: [ 
       { 
        input: 'text' 
       }, 
      ], 

     }, 
    }; 

    var id_filters = $("#filters"); 

    $(document).ready(function() { 
     id_filters.html(template_filters(filters)); 
    }); 

    function template_filters(filters) { 
     var html = '<select class="select_filters" id="select_filters" onchange="add_filter();">'; 

     html += '<option value="0">Select Filter</option>'; 

     for (var property in filters) 
     { 
      if (filters.hasOwnProperty(property)) 
      { 
       var title = filters[property].title; 
       var is_active = filters[property].is_active; 
       var types = filters[property].types; 

       html += '<option value="'+property+'">'+title+'</option>'; 
      } 
     } 

     html += '</select>'; 

     return html; 
    } 

    function template_show_filter(filter, filter_name) 
    { 
     var html = '<div id="filter-'+filter_name+'" class="div_filter">'; 

     html += '<span>'+filter.title+' <a href="javascript:void(0)" onclick="remove_filter(\''+filter_name+'\')">X</a></span>'; 

     html += '</div>'; 
     return html; 
    } 

    function add_filter() 
    { 
     var select_filters = $("#select_filters"); 
     var selected_filter = select_filters.val(); 

     if (selected_filter != 0) 
     { 
      if (active_filters.length == 0) 
      { 
       active_filters.push(selected_filter); 
       id_filters.append(template_show_filter(filters[selected_filter], selected_filter)); 
      } 
      else 
      { 
       if (active_filters.indexOf(selected_filter) === -1) 
       { 
        active_filters.push(selected_filter); 
        id_filters.append(template_show_filter(filters[selected_filter], selected_filter)); 
       } 
      } 


     } 
    } 

    function remove_filter(filter_name) 
    { 
     var index = active_filters.indexOf(filter_name); 



     if (index >= 0) 
     { 
      var id = $("#filter-"+filter_name); 
      id.remove(); 

      active_filters.splice(index); // here, it removes more than one 
     } 
    } 

Answer 1

请看看MDN web docs – Array.prototype.splice()。

如果您只想删除一个项目，应该调用.splice(index, 1)。

如果不指定第二个参数，“然后所有起始索引通过数组的末尾开始的元素都将被删除。”

Answer 2

这是因为你在指数拼接。

active_filters.splice(index); 

这将删除索引值后面的所有元素。