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> 

我希望这能帮助你！