Jquery--点击列表中的项,获取该点中列表的对应值

一、Jquery 在点击列表中的一项时,获取该点击列表项中的相应值
(1)代码

<style>
    ul li{
    
    
     display: block;
     border: 1px solid #ccc;
     padding: 20px;
     margin:0 auto;
     margin-top: 5px;
     cursor: pointer;
    }
    #bottom{
    
    
     width: 350px;
     height: 100px;
     background: #eee;
     margin: auto;
     padding: 10px 20px;
    }
 </style>
<body>
  <ul id="products">
   <li>
    <p>产品一</p>
    <span>积分7200</span>
   </li>
   <li>
    <p>产品二</p>
    <span>积分3500</span>
   </li>
   <li>
    <p>产品三</p>
    <span>积分4500</span>
   </li>
   <li>
    <p>产品四</p>
    <span>积分3600</span>
   </li>
  </ul>
  
  <!--这里是底部-->
  <div id="bottom">
   产品名称:<span id="name"></span><br />
   积分:<span id="total"></span>
  </div>
 </body>
 <script>
      $('#products li').click(function(){
    
    
       aa=$(this).find('p').text();
       bb=$(this).find('span').html();
       $('#name').text(aa);
       $('#total').text(bb);
      });

 </script>

(2)效果图
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/huang_jimei/article/details/107482757