js jQuery,有没有办法在属性中设置/获取多值?

Posted

技术标签:

【中文标题】js jQuery,有没有办法在属性中设置/获取多值?【英文标题】:js jQuery, is there a way to set/get multi value in attribute? 【发布时间】:2016-10-02 07:00:25 【问题描述】:

我正在尝试将属性设置为具有多个值的元素。有可能吗?

我想获取div元素的大小(高度、宽度)并设置在一个数组中,然后将该数组设置为属性值。

我做的是这样的:

function originBoxSize() 
    each('body div', function () 
        var boxSize = [$(this).css('height'), $(this).css('width')];// get the box size 
        $(this).attr('wcag-origin-box-size', boxSize); // set an new attr with boxsize value
    );


现在boxSize 持有["102px", "499px"]

attr 看起来像这样:

wcag-origin-box-size="102px,499px"

当我想获得 attr 值时,我正在输入以下行:

$('#element').attr('wcag-origin-box-size')

结果是这样的:"102px,499px" 这是一个字符串。

有没有办法只从属性中获取特定值(高度或宽度)?

提前致谢。

【问题讨论】:

为什么不直接用 , 分割值呢? $('#element').attr('wcag-origin-box-size').split(",")[0] 会给你高度。 getComputedStyle()developer.mozilla.org/en-US/docs/Web/API/Window/… 我可以这样做,以防我不成功这种方式我会分裂,但我很高兴有一种方法来获取/设置多个值 您可以将每个值设置为自己的属性。或序列化数组/对象/等。到一个字符串,设置它,并在读取它时反序列化它。或者,正如已经建议的那样,只是拆分字符串(这基本上只是一个自定义序列化)。一个属性本身只能包含一个值,并且该值是一个字符串。 检查这个小提琴:jsfiddle.net/mort3za/8s2z8dLw/6 【参考方案1】:

你有一个很好的答案here

基本上您需要使用jQuery's data function 而不是“attr”,并以JSON 有效的格式提供数据。

我修复了您的代码(实际上离正确的方法不远),这是一个工作示例:

function originBoxSize() 
  $('body div').each(function() 

    // Get the box size 
    var boxSizeString = '["' + $(this).css('height') + '","' +
      $(this).css('width') + '"]';
    boxSize = JSON.parse(boxSizeString);

    // Set an new attr with boxsize value
    $(this).data('wcag-origin-box-size', boxSize);
  );


// Set all data-wcag-origin-box-size
originBoxSize();

// Show result
var a_size = $('#a').data('wcag-origin-box-size');
var b_size = $('#b').data('wcag-origin-box-size');
$('#a').html("<p>height: " + a_size[0] + "</p>" +
  "<p>width: " + a_size[1] + "</p>");
$('#b').html("<p>height: " + b_size[0] + "</p>" +
  "<p>width: " + b_size[1] + "</p>");
div 
  margin: 3px;
  border: 2px solid white;
  color: white;
  padding: 7px;
  line-height: 14px;
  font-size: 12px;

#a 
  height: 90px;
  width: 120px;
  background: red;

#b 
  height: 65px;
  width: 200px;
  background: black;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="a"></div>
<div id="b"></div>

【讨论】:

【参考方案2】:

您可以按照自己的方式尝试。

function originBoxSize() 
    each('body div', function () 
        var boxSize = [height:$(this).css('height'),width:$(this).css('width')];
        var myJsonString = JSON.stringify(boxSize);
        $(this).attr('wcag-origin-box-size', myJsonString ); 
    );



var myObject = JSON.parse($('#element').attr('wcag-origin-box-size')) 

您可以从 myObject 中获取值:

var height = myObject[0].height;
var width = myObject[0].width;

【讨论】:

【参考方案3】:

您可以为此使用 jquery data

类似

$(this).data('wcag-origin-box-size', boxSize);

然后,稍后获取使用

$('#element').data('wcag-origin-box-size');

见https://api.jquery.com/data/

【讨论】:

【参考方案4】:

属性值必须是字符串,所以浏览器将数组转换为字符串。对数组进行字符串化的结果相当于调用Array.prototype.join方法。

对于将字符串转为数组,可以逆过程:按,分割:

var array = value.split(',');

您拥有的另一个选项是使用 jQuery .data() 方法,该方法可以按原样存储数组。

新数据值 [...] 可以是除 undefined 之外的任何 javascript 类型。

$(this).data('wcag-origin-box-size', boxSize);

【讨论】:

以上是关于js jQuery,有没有办法在属性中设置/获取多值?的主要内容,如果未能解决你的问题,请参考以下文章

html中设置data-*属性值 并在js中进行获取属性值

有没有办法只在 C# 中设置一次属性

有没有办法只在 C# 中设置一次属性

关于在JS中设置标签属性

firefox(火狐)下 js中设置checkbox属性checked="checked"已有,但复选框却不显示勾选的原因

BigQuery 没有获取在 java 中设置的属性