Question

我有一个列表，单击锚点，我查看父li并获取data-brand属性并将其存储在一个数组中，点击另一个项目后将其添加到数组中。我也想这样，如果你单击数组中已有的项目，它将被删除。

这是否相当直接？

HTML

 <div class="search-data__filter">
      <ul>
        <li data-brand="prada">
          <a href="#" class="chkbox">Prada</a>
        </li>
        <li data-brand="oakley">
          <a href="#" class="chkbox">Oakley</a>
        </li>
        <li data-brand="ray-ban">
          <a href="#" class="chkbox">Ray-Ban</a>
        </li>
        <li data-brand="nike">
          <a href="#" class="chkbox">Nike</a>
        </li>
      </ul>
    </div>

jQuery到目前为止：

$(document).ready(function (){

    checkbox = $(".chkbox");

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

        var ar = $(this).parent("li").map(function () {
            return $(this).attr('data-brand');
        });

        console.log(ar);

        e.preventDefault();
    });

});

我的日志只存储一个数据属性，我认为可能是因为我基本上只映射了被点击的父级？无法锻炼我如何扩展这一点。

Answer 1

你需要将这些东西保存在一个数组中：

$(document).ready(function (){

    var checkbox = $(".chkbox");
    var brands = []; // new array

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

        brands.push($(this).parent("li").attr('data-brand'));
        // naive

        console.log(brands);

        e.preventDefault();
    });

});

这很简单，只需添加即可。现在，我们需要在添加之前检查它是否在那里，如果是，请将其删除：

$(document).ready(function (){

    var checkbox = $(".chkbox");
    var brands = []; // new array

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

        var b = $(this).parent("li").attr('data-brand'); // so we don't have to write it out each time

        if (brands.indexOf(b)!=-1) {
            brands.splice(brands.indexOf(b),1);
        } else {
            brands.push(b);
        }

        console.log(brands);

        e.preventDefault();
    });

});

Answer 2

只需将选择器从$(this)更改为$('a.is-checked')，这样您就可以使用＆＃34;检查＆＃34;锚定器。

var ar = $('a.is-checked').parent('li').map(function () {
    return $(this).attr('data-brand');
}).get();

点击jQuery，构建数据属性数组

2 个答案:

Here's a fiddle