jquery - 要素幅に data-role 値を掛けます

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

最初に明らかなこと： 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');
  });

Answer 2

コードを次のように変更します

$(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);
    });                 
 });

data-role 値が異なる複数の li があります。したがって、各liをループする必要がある各liの幅と高さが異なります。また、jQuery で data-role 属性に直接アクセスすることはできません。上記のコードで問題が解決します。

動作例を確認してください: http://jsfiddle.net/kq7mA/6/

Answer 3

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'
    });        
});