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的不同宽度和高度。我们也无法直接在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');
  });

通过数据角色值乘以元素宽度

3 个答案: