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

最新推荐文章于 2022-08-19 00:50:32 发布

huang_jimei

最新推荐文章于 2022-08-19 00:50:32 发布

阅读量1k

点赞数 1

分类专栏： Jquery

本文链接：https://blog.csdn.net/huang_jimei/article/details/107482757

版权

Jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、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）效果图
在这里插入图片描述

huang_jimei

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
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;
复制链接

扫一扫