Question

我要为产品创建一个颜色选择器。我有12种颜色可供选择，因此可以显示12张照片。

我希望它看起来像这个Flash页面：

http://www.renault.co.uk/cars/model/newmeganehatch/colourselector.aspx

我更喜欢使用jQuery。

我正在考虑使用div行来包含颜色，并在主要图片容器div中调用颜色点击时更改图像。

我会更好地堆叠图像并使用display：none或者使用jQuery循环这样的插件会更好吗？

提前致谢。

编辑显示日期：

<!--The color picker div-->
<div class="picker p1" data-bkgnd="images/1.jpg"></div>
<div class="picker p2" data-bkgnd="images/2.jpg"></div>
<div class="picker p3" data-bkgnd="images/3.jpg"></div>

<!--The container for the product image-->
<div class="productdisplay"></div>

    <script type="text/javascript">
     $(document).ready(function(){
       $(".picker").click(function(){

           //Load background string from data of clicked element
           var bVal = $(this).data('bkgnd');

           //Set display's background to retrieved background string
           $(".productdisplay").hide('fade').css({'background-image': "url('" + bVal + "')"}).show('fade');
       });
     });
    </script>

和CSS

.productdisplay {
height:327px;
width:590px;
float:left;
background-image:url('images/1.jpg');
}
.picker {
height:50px;
width:50px;
float:left;
}
.p1 {
background:#FFF;
}
.p2 {
background:#C4C9C5;
}
.p3 {
background:#988879;
}

目前，在将bVal数据加载到div中时，将“未定义”作为URL，无法理解原因。

Answer 1

这样的事情可以让你开始：

//The color picker div    
<div class="picker" data-bkgnd="/content/images/someimg.jpg"></div>

//The container for your product image
<div class="productDisplay"></div>

<script type="text/javascript">


 $(document).ready(function(){
   $(".picker").click(function(){       
       //Load background string from data of clicked element
       var bVal = $(this).attr('data-bkgnd');
       //Set display's background to retrieved background string
       $(".productDisplay").hide().css({'background-image': "url(" + bVal + ")"}).show();
   });
 });

</script>

Click here to view the fiddle

通过单击另一个更改div中的图像 - jQuery

1 个答案: