コンテナ内の要素の表示と非表示

Question

私は車のパーツアセンブリアプリケーションを構築していますが、まだアイデアに取り組んでいます。

車の部分は、車の画像（メインステージ）を表す特定のフィールドの上に揃えられています。 ユーザーが適切な部品をクリックすると、大きな車の画像上で輝きます。

ここでは、メイン画像の上に適切なdiv（画像）を表示して、特定の部分をちょっと強調したいと考えています。

クリック可能な車の部品でリストを作成することを検討します。リストアイテムには次のものが含まれている必要があります。 車の画像 - メインステージに表示される車の部品の光り輝くバージョンです。

私は、車の部品のリストからメインステージに適切なグロー画像を追加する機能append（）を使用するべきだと思います。

メインステージに追加されたイメージを非表示にして、リストに戻すときに問題が表示されます。

これを行うより良い方法はありますか？

私はいくつかのアイデアを聞きたいと思います。

$(".parts li a").click(
    function() { 
     if ($(this).parent().has(".glowimage")) { 
      $(".main-stage").empty(); 
      } 

      $(".main-stage").append($(this).parent().find(".glowimage").show()); 
      return false; 
    } 
); 

<div class="parts"> 
     <ul> 
      <li> 
       <a href="#"><img src="images/part1.png" alt="part1"/></a> 
       <span class="cloud" style="display:none"> 
        this is so great it worksthis is so great it worksthis is so great it works 
       </span> 
       <span class="glowimage" style="background:url(images/hover1.png) no-repeat right top;"> 
       </span> 
      </li> 
      </ul> 
</div> 

Answer 1

車のリストを使用することができます。車の画像をメインリストの背景として設定し、すべてのリスト項目を非表示にします（各部分に透明な背景の.pngが含まれています。 image）、jQueryを使って問題のリスト項目を表示/非表示にしますか？

<ul id="car"> 
    <li class="part1">Part description</li> 
    <li class="part2">Part description</li> 
    <li class="part3">Part description</li> 
    <li class="part4">Part description</li> 
    <li class="part5">Part description</li> 
</ul> 

<ul id="parts"> 
    <li class="part1"><a href="car" rel="part1">Part description</a></li> 
    <li class="part2"><a href="car" rel="part2">Part description</a></li> 
    <li class="part3"><a href="car" rel="part3">Part description</a></li> 
    <li class="part4"><a href="car" rel="part4">Part description</a></li> 
    <li class="part5"><a href="car" rel="part5">Part description</a></li> 
</ul> 

$('#parts').find('li a').bind('click', function(e){ 
    var item = $(this).attr('rel'); 
    $('#car').find('li').hide(); 
    $('#car').find('li.' + item).toggle(); 
}; 

は...

解決策になるかもしれません

Answer 2

はい：

これは私のコードは次のようになります方法です。あなたは上id属性を設定する場合

$('div.parts li a').click(function() { 
    var id = $(this).attr('id'); 
    $('.mainstage img.showfull_part').attr('src', partsList[id].fullSize); 
}); 

：

var partsList = { 
    aPart: { 
     thumbnail: 'images/apart_ts.png', 
     fullSize: 'images/apart_full.png' 
    } 
}; 

は、このような何かを：起動し、それを行うには良い方法は、このようなオブジェクトからの部品リストを生成することであろう各liにaを追加すると、クリックするたびにメインステージに配置するURLを検索するのに適しています。

テンプレート作成には、多くの優れたJSツールキットがあります。あなたはいくつかを研究し、好きなものを見つけなければなりません。シンプルで小さなテンプレートとデータブロックを使用して、パーツリストのようなUIの大きなチャンクを簡単に作成できます。