如何使用 jQuery 选择的文本作为变量？答案

【问题标题】：How to use jQuery selected text as variable?如何使用 jQuery 选择的文本作为变量？
【发布时间】：2016-02-07 23:21:09
【问题描述】：

我有一堆数组，例如：

var myArrayName  = [1, 2, 3, 4, 5, 6];
var myArrayName2 = [1, 2, 3, 4, 5, 6];
var myArrayName3 = [1, 2, 3, 4, 5, 6];

在我的 DOM 中，我有 data-name="myArrayName" data-push="7"、data-name="myArrayName2" data-push="2" 等元素。

我想选择所有带有data-name 的元素，然后将data-push 值推送给它们，所以：

$("*[data-name]").each(function(){
  var arName = $(this).data("name");
  var toPush = $(this).data("push");

  // how do I make the stuff below work?
  // arName.push(toPush);
})

【问题讨论】：

标签： javascript jquery arrays push

【解决方案1】：

这将选择属性为data-name的所有元素

var arrDataAttr = new Array();
var arrDataPush = new Array();
$(document).find("[data-attr]").each(function()
{
    arrDataAttr.push($(this).attr("data-attr"));
    arrDataPush.push($(this).attr("data-push"));

});

【讨论】：

【解决方案2】：

你需要使用一个对象（字典，地图，不管你怎么称呼它）：

var arrays = {
  'myArrayName': [],
  'myArrayName2':[],
  'myArrayName3':[]
}
$("*[data-name]").each(function(){
  var arName = $(this).data("name");
  var toPush = $(this).data("push");
  arrays[arName].push(toPush);
})

【讨论】：

【解决方案3】：

一种简单的方法是将所有数组包装在一个对象下以命名它们：

var arrays = {
  myArrayName: [1, 2, 3, 4, 5, 6];
  myArrayName2: [1, 2, 3, 4, 5, 6];
  myArrayName3: [1, 2, 3, 4, 5, 6];
};

然后，您可以按名称访问数组，如下所示：

// to access the first array:
arrays["myArrayName"];

最终代码如下所示：

$("[data-name]").each(function(){
  var $item = $(this);
  var arName = $item.data("name");
  var toPush = $item.data("push");

  arrays[arName].push(toPush);
});

注意事项：

请注意，我正在缓存 $(this) 变量，如果您想知道原因，请查看this
如果您想了解更多关于使用 JavaScript 访问对象属性的信息，请查看this

【讨论】：

【解决方案4】：

尝试调整数组变量的名称，data-* 属性，使用在数组上调用的$.each()，选择具有data-name 以当前循环的index 结尾的元素

var myArrayName0 = [1, 2, 3, 4, 5, 6];
var myArrayName1 = [1, 2, 3, 4, 5, 6];
var myArrayName2 = [1, 2, 3, 4, 5, 6];

$.each([myArrayName0, myArrayName1, myArrayName2], function(index, arr) {
  arr.push($("[data-name$=" + index + "]").data("push"))
});

console.log(myArrayName0, myArrayName1, myArrayName2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div data-name="myArrayName0" data-push="7"></div>
<div data-name="myArrayName1" data-push="2"></div>
<div data-name="myArrayName2" data-push="1"></div>

【讨论】：