Question

我有一个点击处理程序，它将父数据属性添加到一个数组，它可以很好地工作。但是我想继续添加到我现有的代码中。

如果页面加载了一些已经选中的项目，我想尝试在那里添加一些逻辑来构建数组。我只是不确定如何解决这个问题。

我在点击时向我的锚添加了一个is-checked类，所以我试图首先检查页面何时加载，如果已经分配了类。

HTML

<div class="search-data__filter filter-open">
  <div class="filter__header">
    <h4>Brand</h4>
  </div>
  <ul>
    <li data-filter="prada">
      <a href="#" class="chkbox is-checked">Prada</a>
    </li>
    <li data-filter="oakley">
      <a href="#" class="chkbox">Oakley</a>
    </li>
    <li data-filter="ray-ban">
      <a href="#" class="chkbox is-checked">Ray-Ban</a>
    </li>
    <li data-filter="nike">
      <a href="#" class="chkbox">Nike</a>
    </li>
  </ul>
</div>

jQuery的：

$(document).ready(function (){

    var checkbox = $(".chkbox"); //the anchor class for headers
    var filterHead = $(".filter__header"); //what are our filter head classes
    var criteria = []; // new array

    //controls the opening of the filter headers
    filterHead.on("click", function(e){
        $(this).parent("div").toggleClass("filter-open");
    });


    //build array of this data-type
    var array = checkbox.parent("li").attr('data-filter'); 

    //not quite doing what I thought... returns 'm' 'e' 'n' 's'
    for (var i = 0; i < array.length; i ++) {
        console.log(array[i]);
    }

    checkbox.on("click", function(e){
        $(this).toggleClass("is-checked");

        //if the data attr is already in the array remove it, else add it
        if (criteria.indexOf(array)!=-1){
            criteria.splice(criteria.indexOf(array),1);
        } else{
            criteria.push(array);
        }

        console.log(criteria);

        $.get( "/_ajax/_editir_ecommerce_search.aspx?theData=" + criteria + "theText" + $('#search-data__specific').val(), function( data ) {  
            $( ".search-data__returned" ).html( data );  
            console.log( "Load was performed." );
        });

        //prevent the hash of the anchor from 
        //sending you to top of screen
        e.preventDefault();
    });

});

但是我上面尝试在我的点击事件之外引入数组变量意味着我的点击不再有效。

一个工作示例可能会让您更容易查看，can find here

Answer 1

var array = checkbox.parent("li").attr('data-filter');

返回一个字符串而不是一个数组。如果你循环一个字符串，你循环字符串的charAt位置，因此你得到了m, e, n, s

要使用现有数据填充数组，请使用：

checkbox.closest("li").attr("data-filter", function(i, v){
    if(v) criteria.push(v); // fill the Array with existing data!!
});

您只需要：

<强> jsBin demo

$(function (){

  var checkbox = $(".chkbox"); //the anchor class for headers
  var checked  = $(".chkbox.is-checked"); // Get the already checked ones
  var filterHead = $(".filter__header"); //what are our filter head classes
  var criteria = []; //build array of this data-type

  //controls the opening of the filter headers
  filterHead.on("click", function(e){
    $(this).parent("div").toggleClass("filter-open");
  });

  checkbox.on("click", function(e){

    e.preventDefault();
    var data = $(this).closest("li").data("filter");
    $(this).toggleClass("is-checked");

    if (criteria.indexOf(data)!=-1){ // remove / add
      criteria.splice(criteria.indexOf(data),1);
    } else{
      criteria.push(data);
    }
    console.log(criteria);

  });
  checked.closest("li").attr("data-filter", function(i, v){
    if(v) criteria.push(v); // fill the Array with existing data!!
  });

  console.log(criteria);

});

Answer 2

我调整了一些代码以使其正常工作。基本上，您必须循环选中复选框，看看他们是否已分配了类is-checked，并将过滤器添加到criteria数组中。

$(document).ready(function (){

var checkbox = $(".chkbox"); //the anchor class for headers
var filterHead = $(".filter__header"); //what are our filter head classes
var criteria = []; // new array

//controls the opening of the filter headers
filterHead.on("click", function(e){
    $(this).parent("div").toggleClass("filter-open");
});

// go through each checkbox
$(checkbox).each(function(index, el){
  // check the class and add the data-filter if it fits
  if($(el).hasClass('is-checked')){
    criteria.push($(el).parent("li").attr('data-filter'));
  }
});

 console.log(criteria);

checkbox.on("click", function(e){
    //extract the filter on click
    var filter = $(this).parent("li").attr('data-filter'); 
    $(this).toggleClass("is-checked");

    //if the data attr is already in the array remove it, else add it
    if (criteria.indexOf(filter)!=-1){
        criteria.splice(criteria.indexOf(filter),1);
    } else{
        criteria.push(filter);
    }

    console.log(criteria);

    $.get( "/_ajax/_editir_ecommerce_search.aspx?theData=" + criteria + "theText" + $('#search-data__specific').val(), function( data ) {  
        $( ".search-data__returned" ).html( data );  
        console.log( "Load was performed." );
    });

    //prevent the hash of the anchor from 
    //sending you to top of screen
    e.preventDefault();
});

});

Answer 3

checkbox.parent("li").attr('data-filter');只返回一个值...集合中的第一个匹配。因此，你假设的数组只是一个字符串

所有jQuery getter都以这种方式工作，只返回集合中第一个元素的值

您需要将它们全部映射

var criteria = checkbox.filter('.is-checked').parent("li").map(function(){
      return $(this).attr('data-filter');
}).get();

如果选择了hasclass，jQuery会添加对象toarray

3 个答案: