目录

效果展示

实现代码

1.前端jsp代码（重点是前端代码）

2.前端js代码（重点是前端代码）

关于c:foreach标签中varStatus

---

效果展示

         说明：这是jsp页面中的利用<c:foreach>标签遍历出集合中的所有商品，利用<c:foreach>的varStatus属性控制其中的各个商品。

---

实现代码

1.前端jsp代码（重点是前端代码）

<c:forEach items="${hgoods}" var="good" varStatus="Status">
      <div id="good1${Status.index}"  class="col-md-2 " 
                   onm ousemove="aa(this.id)" 
                   onm ouseleave="bb(this.id)" 
                   style="text-align:center;height:200px;padding:10px 0px;">

           <a  href="product_info.htm">
                    <img src="<%=request.getContextPath()%>/fileupload/${good.mainImage}"                     
                     width="130" height="130" style="display: inline-block;"></a>
          

           <p><a href="product_info.html" style='color:#666'>${good.name}</a></p>

           <p><font color="#E4393C" style="font-size:16px">&yen;${good.promotePrice} 
              </font></p>

           <div id="sgood1${Status.index}" onclick="add2cart(${good.id})"         
                style="background:rgba(208,8,8,0.7);
                    position:absolute;width:130px;height:24px;
                    bottom: 60px;left: 20px;display: none;font-size: medium;font-weight: 
                    bold;color: rgba(227,178,178,0.8);cursor: default">
                加入购物车
           </div>

      </div>

        </c:forEach>

        说明：主要关注<c:foreach>标签中的 varStatus="Status"，因为Status.index是随着<c:foreach>的遍历而变化的分别是从0，1，2。。。。，根据varStatus的这个特性就可以让每个b遍历的div都设置不同的id从而控制不同的div。

2.前端js代码（重点是前端代码）

/*商品项鼠标事件，不进入商品详细页直接添加到购物车添加购物车*/
    /*start*/
    function aa(id) {
        $('#s'+id).css("display","block")
    }

    function bb(id) {
        $('#s'+id).css("display","none")
    }





/*此部分是ajax添加商品到购物车，无需关注
    function add2cart(goodid) {
        //添加到购物车
        $.ajax({
            url:"${pageContext.request.contextPath}/Action/add2cart",
            data:{"goodid":goodid},
            dataType:"text",
            type:"post",
            ContentType:"application/x-www-form-urlencoded;charset=UTF-8",
            success:function (result) {
                if(result === "login"){
                    $('.ssl-collout h4').html("注意")
                    $('.ssl-collout p').html("请先登录")
                    $('.ssl-collout').addClass('callout callout-warning').show().delay(1000).fadeOut();
                }else {
                    $('.ssl-collout h4').html("通知")
                    $('.ssl-collout p').html(result)
                    $('.ssl-collout').addClass('callout callout-success').show().delay(1000).fadeOut();
                }
            }
        })*/
    }

        说明：这里利用了一个巧妙的点，大div （也就是id="good1${Status.index}"）的id我可以通过this.id直接获取，但是我隐藏起来的 小div （也就是id="sgood1${Status.index}"）id却不好获取，(试过使用隐藏的input并将其value设置成小div的id，但是之后总是获取的第一个id无法获取其它的id),这里我们是通过大div的id获取小div的id，小div就是在大div的id前加一个s（比如我们这大div的id是good10，那么我小的div就是sgood10，在js中获取的时候只需要将获取的大div前用字符串拼接个s即可），在利用js的鼠标移入和移出事件，来设置我要显示和隐藏的小div的display属性即可。

---

关于c:foreach标签中varStatus

        varStatus是JSTL中c:foreach标签下的一个状态项，其它的还有如下图：

        

   

关于varStatus的属性

• index属性：当前迭代的元素在集合中的索引，从0开始
• count 属性：当前迭代的元素是集合中第几个元素，从 1 开始
• first 属性：当前迭代的元素是否为集合中的第一个元素
• current 属性：当前迭代的元素