レスポンシブHTMLをJS使って楽にコーディングしたかった。 #JavaScript

やりたかったこと

HTMLの文章構造を残しつつ
画像を多用するレスポンシブで
記述をなるべく少なく.data()を使ってうまいことできないか画策してた。

普段指定しているimgタグの属性って
width, height, alt（, class, id）くらいだから
生成されるようにしてみた。

test.html


<!-- ターゲットのHTML -->
<a class="img-text" data-file="ファイルパス" data-class="hoge-class">ここがaltになるよ</a>
<h1 class="img-text" data-file="ファイルパス">ここがaltになるよ</h1>


<!-- 生成するHTML -->
<a class="img-text" data-file="ファイルパス" data-class="hoge-class">
<img src="ファイルパス" alt="ここがaltになるよ" width="10" height="10" class="hoge-class">
</a>
<h1 class="img-text" data-file="ファイルパス">
<img src="ファイルパス" alt="ここがaltになるよ" width="10" height="10" class="hoge-class">
</h1>

test.js


// デバイスに合わせた画像のセット
pageObj.Responsive.setImage = function(aElmName)
{

    var type = pageObj.type + '/';

    var dom = $(aElmName);


    dom.each(function() {
        var that = $(this);
        var param = {
            alt   : that.text(),
            path  : 'images/' + type + that.data('file')
        };


        var imgTag = $('<img>');
        imgTag
            .load(function(){
                // スマホの時はサイズを半分にする
                if (type === 'sp/') {
                    this.width  = parseInt(this.width / 2, 10);
                    this.height = parseInt(this.height / 2, 10);
                }
                that.html(this);
            })
            .attr('src',    param.path )
            .attr('alt',    param.alt )
            .attr('width',  param.width )
            .attr('height', param.height );


        // クラス追加処理
        var className = that.data('class');

        if (typeof className !== "undefined" &&
            className !== '') {
            imgTag.addClass(className);

        }
    });
};

pageObj.type = 'pc';

// 呼び出し
pageObj.Responsive.setImage('.img-text');

そもそもで

レスポンシブってコレでよかったんだっけ感。