购物网站中，选择不同颜色和尺寸时，相应地方的文字也跟着改变

效果如图：

 1 <div class="colors">
 2               <strong>颜色：</strong> <span> 蓝白</span>
 3         </div>
 4         <div class="colorimg">
 5           <ul>
 6                   <li><img src="images/pro_img/blue.jpg" alt="蓝白" /></li>
 7                   <li><img src="images/pro_img/yellow.jpg" alt="黄白" /></li>
 8                   <li><img src="images/pro_img/green.jpg" alt="绿白" /></li>
 9                 </ul>
10           </div><!--选择不同颜色-->
11           <div class="size">
12               <strong>尺寸：</strong> <span> 未选择 </span>
13         </div>
14         <div class="sizetype">
15               <ul>
16                   <li>S</li>
17                   <li>L</li>
18                   <li>SL</li>
19                   <li>LL</li>
20               </ul>
21           </div><!--选择不同尺寸-->
$(function() {      
    var color_list=$(".colorimg ul li img");
      color_list.click(function(){
        var text=$(this).attr("alt");
        $(".colors span").html(text);
        });//选择不同颜色时，文字跟着变化
        
        var size_list=$(".sizetype ul li");
      size_list.click(function(){
        var text=$(this).html();
        $(".size span").html(text);
        });//选择不同尺寸时，文字跟着变化
});

其中attr()方法的作用是设置或者返回元素的属性，其中attr(属性名)格式是获取元素属性名的值，attr(属性名，属性值)格式则是设置元素属性名的值。

posted @ 2015-09-29 16:33  SophiaLiu  阅读(278)  评论(0)  编辑  收藏  举报