1

私は jQuery と Visual Studio を使用してすべてを記述している .NET 4.0 環境を使用していますが、XML データの作成方法を除いて、これらの事実はどちらもそれほど重要ではありません。

私は、多くのマークアップを含むこのスクリプトから始めています。私の仕事は、スクリプトからマークアップを取得し、XML データをマークアップの適切な場所に入力することです。これを行うことで、プレゼンテーション層と動作層をできるだけ分離しようとしています。

function addIcons(IconType) {
    var li ="";
    var onclickMethod="";
    for (var item in hashObject) {
        var thumbNail = item.split("_");
        if (thumbNail[0] == IconType +"ThumbNail") {
            var imagePath = baseUrlThumbNailImages + hashObject[item];

            li = li + "<li  onclick=IconClick('" + IconType +"',"+ thumbNail[1] + ")><img src=\"" + imagePath + "\" alt=\"" + IconType + " shape\"></li>\n";
        }
    }
    $("#" + IconType + "ThumbNailShapes").append(li);
}

最終結果として必要なマークアップの例を次に示します。

<ul>
  <li onclick="IconClick('Item',1)">
    <img src="/images/image_1.png" alt="Item shape" />
  </li>
  <li onclick="IconClick('Item',2)">
    <img src="/images/image_2.png" alt="Item shape" />
  </li>
  <li onclick="IconClick('Item',3)">
    <img src="/images/image_3.png" alt="Item shape" />
  </li>
</ul>

で始まるコード行を削除する必要があることはわかっていli = li + ...ますが、マークアップにデータを入力するための for ループの記述方法を理解できるほど OOP に精通していません。

したがって、コーディング方法がわからない2つの要因があります。

  1. 空白のマークアップ - マークアップに変数を入力する必要がありますか、それとも javascript で自動的に行う必要がありますか?
  2. JavaScript - 各リスト項目と画像タグを見つけてさまざまなデータを入力するために JavaScript を再コーディングする方法がわかりません。

すべての変数データが​​まだそこにない場合、このようにマークアップを空白にする必要がありますか?

<ul id="IconThumbnailShapes">
  <li onclick="">
    <img src="" alt="shape" />
  </li>
  <li onclick="">
    <img src="" alt="shape" />
  </li>
  <li onclick="">
    <img src="" alt="shape" />
  </li>
</ul>

洞察と助けに感謝します。

4

1 に答える 1

1

私はこのようにします。

このすべてのコードが存在しなければならないコンテナDIV＃fooがあるとしましょう。

<div id="foo"></div>

次に、これを行います。

$(function() {
   // DOM ready

   $('#foo').on('click', '#IconThumbnailShapes li', function() {
       // Do whatever you have to do with icon
       // Second argument there '#IconThu... li' means the event will be trigerred 
       // as soon as you add your icons, but they don't have to be there 
       // right now.
   });

   function addIcons(iconType) {
       var s = '<ul id="IconThumbnailShapes">'
       var l = '<li><img src="$SRC" alt="$ICON shape" /></li>'
       var data = [{...}, {...}, {...}];
       var len = data.length;

       var datum;

       for (var i = len; i; i--) {
          datum = data[len - i];
          s += l.replace('$SRC', datum.src).replace('$ICON', iconType);
       }

       s += '</ul>';

       $('#foo').html(s);       
   }

});

したがって、forループでjQueryのものを起動したくないので、このようにします。それはパフォーマンスを殺します。代わりに、conainer DIV＃fooをクリックするための遅延偶数ハンドラーを設定し、マークアップの束全体を文字列としてコンテナーに押し込みました。

于 2013-01-03T01:41:54.950 に答える