Jquery 如何使用按钮切换从阵列中添加/删除对象？

我编写了以下内容，将项目添加到数组中，这样我们就无法向其中添加重复的对象，但我希望实现的是，如果我们再次单击添加的项目，则实际添加/删除：

  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()));
  });

var countryArray=[]；
var countryName=“”；
$（“非洲、欧洲、亚洲、美洲”）。在（“单击”，函数（）{
countryName=$（this.attr（“id”）；
设itemPos=countryArray.indexOf（countryName）；
如果（itemPos<0）
countryArray.push（countryName）；
其他的
countryArray.拼接（itemPos，1）
$（“span”）.attr（“数据国家”，$.unique（countryArray.sort（））；
});

var countryArray=[]；
var countryName=“”；
$（“非洲、欧洲、亚洲、美洲”）。在（“单击”，函数（）{
countryName=$（this.attr（“id”）；
设itemPos=countryArray.indexOf（countryName）；
如果（itemPos<0）
countryArray.push（countryName）；
其他的
countryArray.拼接（itemPos，1）
$（“span”）.attr（“数据国家”，$.unique（countryArray.sort（））；
});

不要每次都按数组，而是检查键是否已经存在，如果已经存在，则从数组中拼接（移除键）

var countryArray=[]；
var countryName=“”；
$（“非洲、欧洲、亚洲、美洲”）。在（“单击”，函数（）{
countryName=$（this.attr（“id”）；
设index=countryArray.indexOf（countryName）；
如果（索引>=0）{
countryArray.拼接（索引，1）；
}否则{
countryArray.push（countryName）；
}
log（countryArray.sort（））；
$（“span”）.attr（“数据国家”，countryArray.sort（））；
});
div{
显示：内联块；
宽度：50px；
高度：50px；
}
#非洲{
背景：红色；
}
#欧洲{
背景：绿色；
}
#亚洲{
背景：蓝色；
}
#美国{
背景：黑色；
}
.作为控制台包装{
宽度：100%；
高度：100px；
}
不要每次都按数组，而是检查键是否已经存在，如果已经存在，则从数组中拼接（移除键）


var countryArray=[]；
var countryName=“”；
$（“非洲、欧洲、亚洲、美洲”）。在（“单击”，函数（）{
countryName=$（this.attr（“id”）；
设index=countryArray.indexOf（countryName）；
如果（索引>=0）{
countryArray.拼接（索引，1）；
}否则{
countryArray.push（countryName）；
}
log（countryArray.sort（））；
$（“span”）.attr（“数据国家”，countryArray.sort（））；
});
div{
显示：内联块；
宽度：50px；
高度：50px；
}
#非洲{
背景：红色；
}
#欧洲{
背景：绿色；
}
#亚洲{
背景：蓝色；
}
#美国{
背景：黑色；
}
.作为控制台包装{
宽度：100%；
高度：100px；
}
因为数据国家是一个数据属性，我建议将countryArray转换为对象

这样，代码将是：


var countryArray={}；
var countryName=“”；
$（“非洲、欧洲、亚洲、美洲”）。在（“单击”，函数（）{
if（countryArray[this.id]==未定义）{
countryArray[this.id]=true；
}否则{
删除countryArray[this.id]；
}
$（“span”）。数据（“国家”，countryArray）；
log（Object.keys（countryArray.join（'，'））；
});

非洲
欧洲
亚洲
美国
因为数据国家是一个数据属性，我建议将countryArray转换为对象

这样，代码将是：


var countryArray={}；
var countryName=“”；
$（“非洲、欧洲、亚洲、美洲”）。在（“单击”，函数（）{
if（countryArray[this.id]==未定义）{
countryArray[this.id]=true；
}否则{
删除countryArray[this.id]；
}
$（“span”）。数据（“国家”，countryArray）；
log（Object.keys（countryArray.join（'，'））；
});

非洲
欧洲
亚洲
美国
通过添加
.splice（index，itemsum）
（要删除索引中的项目），您可以删除
$.unique


通过使用类（而不是ID），您将有更多的ID自由


var arr=[]；
$（“.btn”）。在（“单击”，函数（）{
var i=arr.indexOf（this.id）；
i> -1？arr.拼接（i，1）：arr.push（此id）；
$（“span”）.attr（“数据国家”，arr.sort（））；
});
span:after{content:attr（数据国家）；}
非洲
欧洲
亚洲
美国
通过添加
.splice（index，itemsum）
（要删除索引中的项目），您可以删除
$.unique


通过使用类（而不是ID），您将有更多的ID自由


var arr=[]；
$（“.btn”）。在（“单击”，函数（）{
var i=arr.indexOf（this.id）；
i> -1？arr.拼接（i，1）：arr.push（此id）；
$（“span”）.attr（“数据国家”，arr.sort（））；
});
span:after{content:attr（数据国家）；}
非洲
欧洲
亚洲
美国
而不是每次推
ing，您只需检查县是否已在数组中，如果已在数组中，则检查数组而不是推。而不是每次推
ing，您只需检查县是否已在数组中，如果已在数组中，数组而不是推送。这就是诀窍
let index=countryArray.indexOf（countryName）
因为我在使用
splice
时没有使用索引，所以这就是诀窍
let index=countryArray.indexOf（countryName）
因为我在使用
splice
时没有使用索引，所以这就是诀窍
let index=countryArray.indexOf（countryName）
因为我在使用
splice
时没有使用索引，所以感谢这是诀窍
让index=countryArray.indexOf（countryName）因为我在使用
splice
时没有使用索引，谢谢简单易用，谢谢，你为什么建议将其转换为对象？简单易用，谢谢，你为什么建议将其转换为对象？
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()));
});