hamashun.com

サンプルページ

概要

12月3週目のJavaScriptです。 適用したいセレクタを入力してclearfixのコードを吐き出す何かを作ってみました。 出力のセレクタ部分はカンマで改行することもできます。

単純に文字列を取得して定型文に組み込んでいるだけなんですが、組み込む場所がまちまちだったりして書いてる内に混乱してきました。 シンプルにできる事を複雑にしてしまってる気がする。。。

ソースコード

jQueryを使用しています。

$(function () {
  $('#clearfixGeneration').click(function(){
    $(this).empty();
    var new_line_switch = $('#newLineOn').attr('checked');
    var selecter_val = $('#selecterInput').val();
    var comma_length = selecter_val.split(',').length;
    var selecter_text = selecter_val.split('\n');

    for(i=0; i<comma_length; i++) {
      var selecter_ie6 = '* html ' + selecter_text[i];
      var selecters_ie6 = selecter_ie6.replace('\n', '');
      if (ie6) {
        ie6 = ie6 + selecters_ie6;
        if(new_line_switch) {ie6 = ie6.replace(',*', ',\n*');}
      } else {
        var ie6 = selecters_ie6;
        if(new_line_switch) {ie6 = ie6.replace(',*', ',\n*');}
      };
      var selecter_ie7 = '*:first-child+html ' + selecter_text[i];
      var selecters_ie7 = selecter_ie7.replace('\n', '');
      if (ie7) {
        ie7 = ie7 + selecters_ie7;
        if(new_line_switch) ie7 = ie7.replace(',*', ',\n*');
      } else {
        var ie7 = selecters_ie7;
        if(new_line_switch) ie7 = ie7.replace(',*', ',\n*');
      };
      var selecter_modernbrowser = selecter_text[i] + ':after';
      var selecter_modernbrowser_substitution = selecter_modernbrowser.replace(',:after',':after,');
      var selecters_modernbrowser = selecter_modernbrowser_substitution.replace('\n', '');
      if (modernbrowser) {
        if(new_line_switch) {
          modernbrowser = modernbrowser + selecters_modernbrowser.replace(':after,', ':after,\n');
        } else {
          modernbrowser = modernbrowser + selecters_modernbrowser;
        }
      } else {
        if(new_line_switch) {
          var modernbrowser = selecters_modernbrowser.replace(':after,', ':after,\n');
        } else {
          var modernbrowser = selecters_modernbrowser;
        }
      };
      $('#clearfixDone').val(''+ ie6 +' {\n\tzoom: 1;\n}\n\n'+ ie7 +' {\n\tzoom: 1;\n}\n\n'+ modernbrowser +' {\n\tcontent: ".";\n\tdisplay: block;\n\tclear: both;\n\theight: 0;\n\tvisibility: hidden;\n}');
    }
  });
});

改良したい点

• なんかもっと短くまとめて書けると思う。 ブラウザごとに似た処理を3回やってるので、そこを関数にすればいいんだろうか。 でもそうなると引数が多くなるような気がするけどそこは気にしないでいいのかなーとか。 もにょもにょ。
• 入力するセレクタは改行くぎりでないと思った通りにならないので（split()を\nでやってるので）、カンマ区切りにも対応したい