顯示和隱藏容器內的元素

我正在構建一個汽車零部件裝配應用程序，並且仍在研究這些想法。顯示和隱藏容器內的元素

汽車部件在代表汽車圖像（主舞臺）的某個領域上方對齊。當用戶點擊適當的部分時，它會在大型汽車圖像上發光。

現在，我想通過在主圖片上顯示適當的div（圖片）來實現這一點，以便強調某些部分。

我考慮製作一個可點擊的汽車零部件清單，列表項應包含： -car零部件圖像 - 將在主舞臺上顯示的汽車零件的發光版本。

我相信我應該使用函數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>

來源

2012-01-24 Slavisa Perisic

您可以使用汽車零件清單 - 將汽車圖像設置爲主清單的背景，隱藏所有清單項目（每個清單項目都包含發光零件的透明.png，無論是作爲背景圖像還是內聯圖像），並使用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(); 
};

可能是一個解決方案...

來源

2012-01-24 13:29:35 MassivePenguin

是。一個更好的辦法來做到這一點會產生從這樣一個對象部件列表啓動：

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

然後做這樣的事情：

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

如果設置了id屬性上a每li，你可以有一個很好的基礎上查找網址放置在每個點擊的主要階段。

有很多很好的JS工具包，用於模板。你應該研究一些並找到你喜歡的。他們可以使用一個簡單的小模板和一個數據塊，輕鬆構建用戶界面的大塊，如部件列表。

來源

2012-01-24 13:26:03

顯示和隱藏容器內的元素

回答

相關問題