代码之家 › 专栏 › 技术社区 › rob.m

如何使用按钮切换从数组中添加/删除对象?

jquery

rob.m · 技术社区 · 6 年前

  var countryArray = [];
  var countryName = " ";
  $("#africa, #europe, #asia, #america").on("click", function() {
    countryName = $(this).attr("id");
    countryArray.push(countryName);
    $("span").attr("data-country", $.unique(countryArray.sort()));
  });

4 回复 | 直到 6 年前

vicbyte 6 年前

不是每次都推到数组,而是检查键是否已经存在,如果已经存在, splice

var countryArray = [];
var countryName = " ";
$("#africa, #europe, #asia, #america").on("click", function() {
    countryName = $(this).attr("id");
    let index = countryArray.indexOf(countryName);
    if (index >= 0) {
        countryArray.splice(index, 1);
    } else {
        countryArray.push(countryName);
    }
    console.log(countryArray.sort());
    $("span").attr("data-country", countryArray.sort());
});

div {
  display: inline-block;
  width: 50px;
  height: 50px;
}
#africa {
  background: red;
}
#europe {
  background: green;
}
#asia {
  background: blue;
}
#america {
  background: black;
}

.as-console-wrapper {
  width: 100%;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="africa"></div>
<div id="europe"></div>
<div id="asia"></div>
<div id="america"></div>

Marcelo Myara 6 年前

var countryArray = [];
var countryName = " ";
$("#africa, #europe, #asia, #america").on("click", function() {
  countryName = $(this).attr("id");

  let itemPos = countryArray.indexOf(countryName);
  if (itemPos < 0)
    countryArray.push(countryName);
  else 
    countryArray.splice(itemPos, 1)
  $("span").attr("data-country", $.unique(countryArray.sort()));
});

gaetanoM 6 年前

因为是我建议将countryArray转换为对象的数据属性。

这样,代码将是:

var countryArray = {};
var countryName = " ";
$("#africa, #europe, #asia, #america").on("click", function() {
    if (countryArray[this.id] === undefined) {
        countryArray[this.id] = true;
    } else {
        delete countryArray[this.id];
    }
    $("span").data("country", countryArray);
    console.log(Object.keys(countryArray).join(', '));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="africa">africa</button>
<button id="europe">europe</button>
<button id="asia">asia</button>
<button id="america">america</button>
<span></span>

Roko C. Buljan 6 年前

.splice(index, itemsNum) (要删除索引中的项)可以删除 $.unique .

var arr = [];

$(".btn").on("click", function() {

  var i = arr.indexOf(this.id);
  i>-1 ? arr.splice(i, 1) : arr.push(this.id);
  $("span").attr("data-country", arr.sort());
  
});

span:after { content: attr(data-country); }

<button class="btn" id="africa">africa</button>
<button class="btn" id="europe">europe</button>
<button class="btn" id="asia">asia</button>
<button class="btn" id="america">america</button>
<span data-country=""></span>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>