2

この JavaScript (Jquery) コードを記述するためのより良い方法があるかどうか疑問に思っています。このスニペットは、リンクを含む H3 を動的に作成しました。

私のデザイナーは、これを JavaScript のようにスタイルしようとしています。これを小さなチャンクに書き直し/リファクタリングして、デザイナーがこのコードをすべて1行で見なくてもスタイルできるようにしようとしています。

var dvClassContainer = $(document.createElement('div')).attr("id", 'dvclassconatiner_' + classVal).attr("classifname", classifname).attr("memclassnumber", memclassnumber).html('<h3>' + classifname + '<a id="ancclassremove_'+ classVal +'" classVal="' + classVal + '" onclick="RemoveClassificationUponConfirm(\'' + classVal + '\');" class="buttons delete btnSmall">Delete</a></h3><img style="display:none;" id="imgloadRemClass_' + classVal + '" alt="loading" src="../Images/application/smallUploading.gif" />');

もっと多くの変数を作成し、それらを組み合わせることを考えていました。これを書く「よりクリーンな」方法はありますか？

4

5 に答える 5

2 
var dvClassContainer = $(document.createElement('div'))
                            .attr("id", 'dvclassconatiner_' + classVal)
                            .attr("classifname", classifname)
                            .attr("memclassnumber", memclassnumber)
                            .html('<h3>' + classifname + '<a id="ancclassremove_'+ classVal +'" classVal="' + classVal + '" onclick="RemoveClassificationUponConfirm(\'' + classVal + '\');" class="buttons delete btnSmall">Delete</a></h3><img style="display:none;" id="imgloadRemClass_' + classVal + '" alt="loading" src="../Images/application/smallUploading.gif" />');

最後の行はまだ修正が必要です。要素を作成し、それらの属性を設定してから、それらをに追加しますh3。var h3 = $("<h3></h3>");（例として）を使用してこれを実行し、を使用して属性を設定し.attr()、最後.append()にすべてをまとめることができます。

于 2012-06-27T17:26:48.913 に答える
2

jQueryの機能をさらに活用すると、コードが読みやすくなり、保守が容易になります。

var dvClassContainer = $('<div>');
dvClassContainer.attr({
  id: 'dvclasscontainer_'+classVal,
  classifname: classifname,
  memclassnumber: memclassnumber
});
var dvHeader = $('<h3>');
var dvHeaderLink = $('<a>Delete</a>');
dvHeaderLink.attr({
  id: 'ancclassremove_'+classVal,
  classVal: 'classVal',
  class: 'buttons delete btnSmall'
}).on('click',function(){
  RemoveClassificationUponConfirm(classVal);
});
var dvImg = $('<img>');
dvImg.attr({
  id: 'imgloadRemClass_'+classVal,
  alt: 'loading',
  src: '../Images/application/smallUploading.gif'
});
dvClassContainer.append(dvHeader.append(dvHeaderLink.append(dvImg)));

理想的には、これらすべての非標準属性（classifname、memclassnumber、classVal）を、jQueryの関数data-を介してアクセスできる属性に移動することもできます。data()

于 2012-06-27T17:28:48.757 に答える
0

DouglasCrockfordのSupplantメソッドを使用します。文字列をトークン化するため、文字列を動的に構築できます。これがフィドルの例です：http：//jsfiddle.net/mmeah/F23rk/

// http://javascript.crockford.com/remedial.html
if (!String.prototype.supplant) {
    String.prototype.supplant = function (o) {
        return this.replace(/{([^{}]*)}/g,
            function (a, b) {
                var r = o[b];
                return typeof r === 'string' || typeof r === 'number' ? r : a;
            }
        );
    };
}

var classVal="x", classifname="y", memclassnumber="z"; //predefined

var dvClassHtml = $("#someDiv").html();
$("#someDiv").html("");
var params ={
    "classVal":classVal,
    "classifname":classifname,
    "memclassnumber":memclassnumber
};
dvClassHtml=dvClassHtml.supplant(params);

var dvClassContainer = 
$(document.createElement('div'))
.attr("id", 'dvclassconatiner_' + classVal)
.attr("classifname", classifname)
.attr("memclassnumber", memclassnumber)
.html(dvClassHtml);
于 2012-06-27T18:01:36.760 に答える
0

この1行のコードが厄介であることを認めた後、これについては別の方法で進めます。

デザイナーに頭痛の種を与えているのはJavaScriptではありません。彼らがCSSでこれをスタイリングできない場合、彼らは十分に努力していません。確かに、h3とanchorは、スタイリングのために取得できる他の要素の内側にあります。

.someContainer h3 { color: chartreuse; }

ただし、可能な限りすべてを試した場合でも、新しいクラスを1つまたは2つ（h3とアンカーに）追加する必要があります。あなたが持っているところであなたは.html('<h3>'...それをに変えるでしょう.html('<h3 class="someClass">'...

貧弱な実装で悪いJSを最適化して完全に修正するのは楽しいことですが、これが「機能している」と仮定すると、問題は設計者のスタイリング能力にあります。したがって、これは実際にはJavaScriptの問題ではありません。

于 2012-06-27T17:31:59.190 に答える
0 
var dvClassContainer = $('<div/>')
     .attr({'id': 'dvclassconatiner_' + classVal,
           'classifname': classifname,
           'memclassnumber': memclassnumber
     })
     .html(
         function() {
             var $title = $('<h3>' + classifname + '</h3>');
             var $link = $('<a>Delete</a>').attr({
                 'id': 'ancclassremove_' + classVal,
                 'classVal': classVal,
                 'class': 'buttons delete btnSmall'
             })
             .on('click', function() {
                 RemoveClassificationUponConfirm(classVal);
             });

             var $img = $('<img/>').attr({
                 'id': 'imgloadRemClass_' + classVal,
                 'alt': 'loading',
                 'src': '../Images/application/smallUploading.gif'
             })
             .css('display', 'none');

             return $title.append($link).add($img);
     });

デモ

于 2012-06-27T17:57:56.423 に答える