jQuery元素交換

Question

我有3個div，其中只有一個默認可見，它們都包含有關產品的信息。在這個div下面是3張圖片的列表，這些圖片是產品的圖片。當然，默認情況下，第一個列表項目被選中並具有class="selected"。當單擊不同的產品圖像時，class="selected"會移至該列表項目，並且其上方的div將更改爲隱藏，並且需要顯示包含其他產品信息的div。

我已經在遍地搜索一個可以做我想做的事情的插件，它們都以某種方式受到限制，從而阻止我做這件事。

Answer 1

考慮下面的代碼：

<img id="img1" src="1.jpg" desc="d1" class="selected prodImg" /> 
<img id="img2" src="2.jpg" desc="d2" class="prodImg" /> 
<img id="img3" src="3.jpg" desc="d3" class="prodImg"/> 

<div id="d1">description 1</div> 
<div id="d2" class="hidden">description 2</div> 
<div id="d3" class="hidden">description 3</div> 

<script> 

    $(".prodImg").click(function() { 

     if ($(this).hasClass("selected")) return; 

     $("#" + $(".selected").attr("desc")).addClass("hidden"); 
     $(".selected").removeClass("selected"); 

     $("#" + $(this).attr("desc")).removeClass("hidden"); 
     $(this).addClass("selected"); 

    }); 

</script> 

這應該讓你非常接近。你需要定義你的圖像和div之間的關係......所以我給圖像添加了「desc」屬性。圖像上額外的'prodImg'類可以讓您確保只有這些圖像被連接到這種類型的交換輸入和輸出行爲。

Answer 2

Acordian小部件有一些類似的功能。如果將圖像放在標題中，您將獲得所需的效果。

查看http://docs.jquery.com/UI/Accordion瞭解更多信息。

Answer 3

<script> 

    $(".prodImg").click(function() { 

     if ($(this).hasClass("selected")) return; 


     $('.prodImg').removeClass('selected'); 

     $(this).addClass('selected'); 

     var name = $(this).attr('desc'); 

     $('.'+name).removeClass(); 
     $('.'+name).addClass('');  

    }); 

</script> 

我希望這能幫助你！