Question

如何返回同一div的两个数据属性？在下面的代码中，我从div返回data-color的值。我还想从同一个div返回data-background属性，所以我可以在部分'css：background-color：[data-background value here]中使用它;

我将如何在下面的代码中执行此操作？

var colors = $("div").map(function() {
  return $(this).data("color");
});

var backgrounds = $("div").map(function() {
  return $(this).data("background");
});

var $ul = $("ul#slideImages"),
$swatches = $(".swatches");
$.each(colors, function(i, color) {
  var $li = $("<li/>", {
    class: color
  });
  $ul.append(new Array(7).join($li.get(0).outerHTML));
  $swatches.append($("<swatch/>", {
    text: color,
    css: {
      "background-color": backgrounds
    },
    on: {
      click: function() {
        $('ul#slideImages li.' + $(this).text()).prependTo('ul#slideImages');
      }
    }
  }))
});

所以，这些答案似乎没有起作用，所以我尝试改变并简化问题：

我有两个循环，我想循环遍历loop1并将其数据属性值插入loop2。使用下面我该怎么做？

$(".groupA[data-background]").each(function(i){
   var backgroundData = $(this).data('background');
})


$(".groupB").each(function(i){
   var insertedBackground = $(this).attr('style');   
})

Answer 1

使用单个函数返回包含color和background属性的对象的映射，然后迭代该集合：

var attribs = $("div").map(function () {
    return {
        color: $(this).data("color"),
        background: $(this).data("background")
    };
});

var $ul = $("ul#slideImages"),
$swatches = $(".swatches");
$.each(attribs, function (i, attrib) {
    var $li = $("<li/>", {
        class: attrib.color
    });
    $ul.append(new Array(7).join($li.get(0).outerHTML));
    $swatches.append($("<swatch/>", {
        text: attrib.color,
        css: {
            "background-color": attrib.background
        },
        on: {
            click: function () {
                $('ul#slideImages li.' + $(this).text()).prependTo('ul#slideImages');
            }
        }
    }))
});

Answer 2

嗨，请尝试这个解决方案：

1）创建一个数组变量。

2）填充数组中的值。

3）返回数组。

4）访问数组中的值。

Answer 3

您只能从函数返回一个事物，但通过使用数组或对象，您可以返回一个事物中包含的许多单独内容：

var colors = $("div").map(function() {
  var self = $(this);
  return {
    'color' : self.data('color'),
    'background' : self.data('background');
  }
});

然后使用以下命令访问值：

colors[index].color,
colors[index].background

Answer 4

您的问题似乎与示例代码无关。

你在HTML中定义你的div？例如

<div id='id' data-background='#RRGGBB' data-color='#RRGGBB'>content</div>

然后你可以用jquery引用它，例如

var b = $('#id').data('background');
var c = $('#id').data('color');

或者，如果使用javascript存储数据属性，只需使用数据集方法

$('#id').data('color','#RRGGBB').data('background','#RRGGBB');

从同一个div返回两个数据属性

4 个答案: