catalogue

Effect display

Implementation code

1. Front end jsp code (focus on front-end code)

2. Front end js code (focus on front-end code)

About varStatus in c:foreach tag

Effect display

          Note: in the jsp page, use the < C: foreach > tag to traverse all the commodities in the collection, and use the varStatus attribute of < C: foreach > to control each commodity.

Implementation code

1. Front end jsp code (focus on front-end code)

<c:forEach items="${hgoods}" var="good" varStatus="Status">
      <div id="good1${Status.index}"  class="col-md-2 " 
                   onmousemove="aa(this.id)" 
                   onmouseleave="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">
                add to cart
           </div>

      </div>

        </c:forEach>

         Note: focus on the in the < C: foreach > tag   varStatus="Status", because the Status.index changes with the traversal of < C: foreach >, from 0, 1, 2...., According to this feature of varStatus, you can set different IDs for each div traversed by b, so as to control different Div.

2. Front end js code (focus on front-end code)

/*The mouse event of a commodity item is added directly to the shopping cart without entering the commodity details page*/
    /*start*/
    function aa(id) {
        $('#s'+id).css("display","block")
    }

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





/*This section is ajax to add goods to the shopping cart, no need to pay attention
    function add2cart(goodid) {
        //Add to cart
        $.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("Note ")
                    $('.ssl-collout p').html("Please log in first)
                    $('.ssl-collout').addClass('callout callout-warning').show().delay(1000).fadeOut();
                }else {
                    $('.ssl-collout h4').html("Notification "")
                    $('.ssl-collout p').html(result)
                    $('.ssl-collout').addClass('callout callout-success').show().delay(1000).fadeOut();
                }
            }
        })*/
    }

        Note: a clever point is used here, the big Div   (i.e. id="good1${Status.index}") can be obtained directly through this.id, but I hide it   Small div   (that is, id="sgood1${Status.index}") ID is not easy to obtain. (I tried to use the hidden input and set its value to the ID of the small div, but the first id always obtained later cannot obtain other IDS). Here, we obtain the ID of the small div through the ID of the large Div. the small div is to add an s before the ID of the large Div (for example, if the ID of our large div is good10, then my small div is sgood10. When obtaining the large div in js, you only need to splice an s in front of the obtained large div with a string). Use the js mouse to move in and out events to set the display attribute of the small div I want to display and hide.

About varStatus in c:foreach tag

         varStatus is a status item under the c:foreach tag in JSTL, and others are shown as follows:

About the properties of varStatus

• Index attribute: the index of the element of the current iteration in the collection, starting from 0
• count attribute: the element of the current iteration is the number of elements in the collection, starting from 1
• First attribute: whether the element of the current iteration is the first element in the collection
• Current attribute: the element of the current iteration