jquery - 将元素宽度乘以数据角色值

Question

我正在尝试从对象中获取数据角色值，并将该对象的宽度和高度与该值相乘。

这是我迄今为止所拥有的小提琴http://jsfiddle.net/kq7mA/

如果可以的话请帮忙 ：）

var cssStyle = {
'background-color' : '#ddd',
'font-weight' : 'bold',
'width' : ('100px' * data-role),
'height' : ('150px' * data-role),
'color' : 'white'
}
$(document).ready(function() {
       $('li').css(cssStyle);
 });​

Answer 1

将您的代码更改为

$(document).ready(function() {
    var cssStyle
    $('li').each(function(){
       cssStyle = {
         'background-color' : '#ddd',
         'font-weight' : 'bold',
         'width' : ('100' *     $(this).attr("data-role")),
         'height' : ('150' * $(this).attr("data-role")),
         'color' : 'white'
       }
       $(this).css(cssStyle);
    });                 
 });

我们有多个 li 具有不同的数据角色值。因此，我们需要循环遍历每个 li 的每个 li 具有不同的宽度和高度。我们也不能直接在 jQuery 中访问 data-role 属性。上面的代码将解决您的问题。

检查工作示例：http: //jsfiddle.net/kq7mA/6/

Answer 2

http://jsfiddle.net/kq7mA/2/

$('li').each(function() {
    var dataRole = $(this).data('role');
    $(this).css({
        'background-color' : '#ddd',
        'font-weight' : 'bold',
        'width' : (100 * dataRole) + 'px',
        'height' : (150 * dataRole) + 'px',
        'color' : 'white'
    });        
});

Answer 3

首先是显而易见的事情： data-role没有定义，并且您不能将这样的字符串与数字相乘（假设data-role将包含一个数字）。

由于您想data-role从每个元素中获取，您必须计算width并height通过迭代元素：

var cssStyle = {
    'background-color': '#ddd',
    'font-weight': 'bold',
    'color': 'white'
};



$('li')
  .css(cssStyle)
  .css('width', function() {
      return 100 * $(this).data('role');
  })
  .css('height', function() {
      return 150 * $(this).data('role');
  });