建立“匹配”“对应”关系，用自定义属性-索引值btn[ i ].index = i（记录项目，代码不全仅供参考）

最新推荐文章于 2024-09-25 16:29:08 发布

夏目松松

最新推荐文章于 2024-09-25 16:29:08 发布

阅读量213

点赞数

文章标签： js css html web

本文链接：https://blog.csdn.net/qq_43129582/article/details/114151193

版权

js循环给li绑定事件实现点击li弹出其索引值和内容，获取用户点击的按钮索引值

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@page import="petTest.dao.QueryProduct,petTest.bean.Products"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Test-newsTitle</title>
  </head>
 <style>
 #p1{
		font-size:20px;
		color:#999;
		margin:20px 0 0 50px;
				
		}
	#p2{
		font-size:17px;
		color:#999;
		margin:-10px 0 20px 900px;
			
		}	
		


	 #tb #tr1 #td #a1{
	    display:block;
		width:150px;
		height:40px;
		color:#000;
		text-algin:center;
		line-height:40px;
		background:#FFF;
		text-decoration:none; /*去掉a标签的下划线*/
		margin: 20px 0 -30px 10px; 
		text-align: center;  	
		transition: 0.4s all ease-in-out; 	/*缩放变速*/
		font-family:STSong;
		font-size:20px;
		}	
		
	#tb #tr1 #td #a1:hover{
		background-color:#fbb18e;	
		color:#FFF;
		transform: scale(1.2); /*鼠标悬停图片缩放*/
		
		}
		
	#td1{
		width:150px;
		height:40px;
		margin:0 20px 0 0;	
		}	
		
	#d1{
			height:400px;
			width:100%;	
			background: linear-gradient(#effbf9 0%, #eff4f8 100%); /*linear-gradient() 函数用于创建一个线性渐变的 "图像" rgba颜色值  　　0deg不是按我们数学的角度向右定义的，默认方向是向上的，是从方向北开始的，所以北才是0deg，*/
			margin:30px 0 40px 0;
		
		}
	#d2{
		background:url(picture/狗窝1.jpg) no-repeat 30px center;
		height:400px;
		width:600px;	
		}	
	#p3{
		text-align:center;
		font-size:55px; 
		color:#242729; 
    	text-shadow:0 0 20px;   
    	letter-spacing: 2px;
		font-weight:bold;
		font-family:STSong;	
		margin:-80px 0 0 60px;
		}	
		
	#p4{
		text-align:center;
		font-size:20px; 
		color:#868b8e; 
		font-weight:bold;
		font-family:STSong;	
		margin:20px 0 0 50px;
		}	
			

	
/*商品*/

   .box_head{
    position: relative;
    margin: 0;
    height: 50px;
    font-size: 30px;
    font-weight: 400;
    color: #757575;
    border-top: 1px solid #e0e0e0;
    
  }
  .box_head span{
  position: absolute;
    top: -20px;
    left: 372px;
    height: 40px;
    width: 482px;
    line-height: 40px;
    text-align: center;
    display: block;
    background-color: #f5f5f5;
    font-size: 30px;
    }
    #box {
        width:1240px;
        margin: 20px auto;
    }
    #box ul {
        margin-right: -14px;
        overflow: hidden; /*自身样式不显示*/
    }
    #box li {
        width: 258px;
        float: left;
        margin-right: 14px;
        padding: 24px 0 20px;
        background: #f5f5f5;
        text-align: center;
        position: relative;
        cursor: pointer;
        margin-bottom:14px;
        overflow: hidden;  /*自身样式不显示  去掉点*/
        margin-left:20px; /*外边距*/
    }
 
  .pro_img {
        width: 270px;
        height: 150px;
        margin: 0 auto 18px;
    }
    .pro_name {
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-weight: 400;
        margin:20px 0 0 0;
    }
    .pro_name a {
        color: #333;
    }
    .pro_price {
        color: #ff6700;
        margin: 10px;
    }
    .pro_rank {
        color: #757575;
        margin: 10px;
    }
    
     #box li:hover .add_btn {
        display: block;
    }
    #box li:hover .pro_rank {
        opacity: 0;
    }
    #box li .add_btn:hover {
        background-color: #f60;
        color: white;
    }
 
    .add_btn {
        height: 22px;
        position: absolute;
        width: 122px;
        bottom: 28px;
        left: 50%;
        margin-left: -61px;
        line-height: 22px;
        display: none;
        color: #F60;
        font-size: 12px;
        border: 1px solid  #f60;
    }

 </style> 

<script>
function pro_value(){
	//添加索引值的作用：建立匹配、对应的关系。
	var itemli = document.getElementsByTagName("li");

	   for(var i = 0; i<itemli.length; i++){
	　　　　itemli[i].index = i; //给每个li定义一个属性索引值，赋

	　　　　itemli[i].onclick = function(){
	　　　　　  //  \n换行   索引值从0开始
	 	var name = document.getElementsByClassName("pro_name");
	  	var pro_name=name[this.index].innerText;
	  	　alert("下标索引值为："+this.index+"name:"+pro_name);  

	　　　　}

	   }
}

</script>


  <body>
  <!--标题-->
		<p id="p1">宠物商品</p>
	    <p id="p2">你想要的都有</p>
	    <hr />

		<!--导航栏-->
		 	<table id="tb">
		    	<tr id="tr1">
		    	 <td id="td"><a href="/PetHospitalManager/index.jsp" id="a1">主页</a></td>
		            <td id="td"><a href="/PetHospitalManager/SearchFood.jsp" id="a1">宠物食品</a></td>
		            <td id="td"><a href="/PetHospitalManager/SearchClothes.jsp" id="a1">宠物衣服</a></td>
		            <td id="td"><a href="/PetHospitalManager/SearchHome.jsp" id="a1">宠物窝</a></td>
		            <td id="td"><a href="/PetHospitalManager/SearchToys.jsp" id="a1">其他</a></td>
		        </tr>
		    </table>
		
		
	
		
		<!--图片-->
		<div id="d1">
			<table>
		    	<tr>
		        	<td><div id="d2"></div></td>
		    		<td>
		            	<p id="p3">New Collection</p>
		            	<p id="p4">New pet products to meet your needs</p>
		            </td>
		    	</tr>
		    </table>
		</div>
  
  <!-- 商品 -->
    
         <div id="box">
                <h2 class="box_head"><span>宠物商品</span></h2>
                <ul id="search">
                <%
           QueryProduct dao=new QueryProduct(); 
           List<Products> list =dao.readFirstTitle();
       
           for(Products product:list)
      {       	
      %>      

                	<li>
                	<div class="pro_img"><img src="<%=product.getImg() %>" alt="图片.jpg" width="150" height="150"/></div>
                	<h3 class="pro_name"><%=product.getTrade_name() %></h3>
                	<p class="pro_price">￥<%=product.getUnit_price() %></p>
                	<p class="pro_rank"><%=product.getevaluate() %>万人好评</p>
                	<button class="add_btn" onclick="pro_value()">加入购物车</button>

                  </li>
  <%
      }
       %>
  
      </ul>
            </div>
           
  </body>
</html>