zoukankan      html  css  js  c++  java
  • 对Ul下的li标签执行点击事件——如何获取你所点击的标签

    问题所来:做项目时,一般的数据都是用循环动态加载出来的,结构都是一样的,只是绑定的值不同,如何对相同的标签做处理的问题就来了。

    例如:点谁就显示谁的数值

    <ul id="test">

     <li class="test">1</li>

     <li  class="test">2</li>

      <li  class="test">3</li>

      <li  class="test">4</li>

    </ul>

    1解:   如果没有class属性的时候   

     在相同的标签外部(随便找一个即可,需要包裹所有的相同标签)  

    ( ul包裹了所有的li, on里面的 第一个参数:需要的做的事件类型,第二个参数:对谁做 执行这个事件的对象)

     对于ul中的li

    $("ul#test").on("click","li",function(){      //只需要找到你点击的是哪个ul里面的就行
    
         alert($(this).text());
     });

    对于表格中的td

    <table class="display" id="example" cellspacing="0" width="100%">
    <thead>
    <tr> <th>型号编号</th> <th>型号名称</th> <th>型号描述</th> <th>创建时间</th>  <th>操作</th> </tr>
    </thead>
    <tbody>
    <tr> <td>1</td> <td>车子</td> <td>描述</td> <td>2016/11/15</td>  <td> <button id='delrow' type='button'>删除</button> </td> </tr>
    <tr> <td>2</td> <td>衣服</td> <td>描述2</td> <td>2016/11/16</td>  <td><button id='delrow' type='button'>删除</button></td> </tr>
    </tbody>
    </table>
    $('#example tbody').on('click', 'button#delrow', function () {
         var tt = $("#example").DataTable();
          tt.row($(this).parent('tr')).remove();  //删除你点击的行
    
       });

    2解:有class属性    通过循环来做

    $(".test").each(function(){
        alert( $(this).text());
    });

    3解:有class属性

    $(".test").click(function(){
        alert( $(this).text());
    });
  • 相关阅读:
    安居客scrapy房产信息爬取到数据可视化(下)-可视化代码
    安居客scrapy房产信息爬取到数据可视化(上)-scrapy爬虫
    反贪风暴4-猫眼影评从爬取到可视化
    vue实战:路由监听
    vue实战——登录页面
    一个电商首页
    网页换肤
    小游戏—九宫格(拼图游戏)
    复选框(checkbox)、多选框
    CSS实现水平垂直居中
  • 原文地址:https://www.cnblogs.com/Sea1ee/p/6204596.html
Copyright © 2011-2022 走看看