jsp中操作c:foreach标签中varStatus属性,实现鼠标事件

目录

效果展示

实现代码

1.前端jsp代码(重点是前端代码)

2.前端js代码(重点是前端代码)

关于c:foreach标签中varStatus


效果展示

jsp中操作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标签下的一个状态项,其它的还有如下图:

        jsp中操作c:foreach标签中varStatus属性,实现鼠标事件

   

关于varStatus的属性

  • index属性:当前迭代的元素在集合中的索引,从0开始
  • count 属性:当前迭代的元素是集合中第几个元素,从 1 开始
  • first 属性:当前迭代的元素是否为集合中的第一个元素
  • current 属性:当前迭代的元素
上一篇:iframe 添加样式


下一篇:RHCE7.0答案之ISCSI客户端