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,有没有办法在属性中设置/获取多值?的主要内容,如果未能解决你的问题,请参考以下文章
firefox(火狐)下 js中设置checkbox属性checked="checked"已有,但复选框却不显示勾选的原因