1. 程式人生 > >html js jquery 對Ul下的li標籤執行點選事件——如何獲取你所點選的標籤

html js jquery 對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());
});

轉:https://www.cnblogs.com/Sea1ee/p/6204596.html