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

效果如图：

<div class="colors">
              <strong>颜色：</strong> <span> 蓝白</span>
        </div>
        <div class="colorimg">
          <ul>
                  <li><img src="images/pro_img/blue.jpg" alt="蓝白" /></li>
                  <li><img src="images/pro_img/yellow.jpg" alt="黄白" /></li>
                  <li><img src="images/pro_img/green.jpg" alt="绿白" /></li>
                </ul>
          </div><!--选择不同颜色-->
          <div class="size">
              <strong>尺寸：</strong> <span> 未选择 </span>
        </div>
        <div class="sizetype">
              <ul>
                  <li>S</li>
                  <li>L</li>
                  <li>SL</li>
                  <li>LL</li>
              </ul>
          </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(属性名，属性值)格式则是设置元素属性名的值。