關於data-屬性

時間 2019-11-10

標籤關於 data 屬性简体版

原文原文鏈接

關於data-屬性javascript

現有需求以下，也就是相似作一個tab頁的切換以下圖：css

由於這裏要記錄一下jquery裏的「data-屬性」的用法，因此忽略相似的組件。html

往HTML標籤上添加任意以 "data-自定義名稱"開頭的屬性，這些屬性頁面上是不顯示的，它不會影響到你的頁面佈局和風格，但它倒是可讀可寫的。而讀取數據的時候data(自定義名稱)就能夠取到值了。java

後臺：jquery

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Test160108.Controllers
{
    public class DuController : Controller
    {
        //
        // GET: /Du/

        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult List()
        {
            List<Person> person = new List<Person>();
            for (int i = 0; i < 10; i++)
            {
                person.Add(new Person()
                {
                    Id=i,
                    Name="TESTNAME"+i,
                    Remark = "這是第"+i+"條紀錄"
                });
            }
            return Json(person, JsonRequestBehavior.AllowGet);
        }


        public class Person
        {
            public int Id { get; set; }

            public string  Name{ get; set; }

            public string  Remark { get; set; }                          
        }
    }
}

後臺模擬數據

前臺：ajax

 1 @{
 2     Layout = null;
 3 }
 4 
 5 <!DOCTYPE html>
 6 
 7 <html>
 8 <head>
 9     <meta name="viewport" content="width=device-width" />
10     <script src="~/Scripts/jquery-1.7.1.min.js"></script>
11     <script type="text/javascript">
12         $(function () {
13             $("#showBtn").click(function () {
14                 $.ajax({
15                     type: "post",
16                     url: "/du/list",
17                     success: function (data) {
18                         console.log(data);
19                         if (data.length > 0) {
20                             $.each(data, function (index, value) {
21                                 // console.log(index);
22                                 $("#ul4Names").append("<li data-key=\" " + index + " \" class=\"li4Names\" <a href=\"javascript:;\">" + value.Id + "</a></li>");
23                             });
24                             $(".li4Names").click(function () {
25                                 $(this).css("background-color", "#00ced1").siblings().css("background-color", "white");
26                                 //  alert(data[$(this).data("key")].Name);
27                                 $("#rightDiv table tbody tr td.tdName").html(data[$(this).data("key")].Name);
28                                 $("#rightDiv table tbody tr td.tdRemark").html(data[$(this).data("key")].Remark);
29                             });
30                         }
31                     }
32                 });
33             });
34         });
35     </script>
36     <title>Index</title>
37 </head>
38 <body>
39     <div>
40         <button id="showBtn">出現</button>
41     </div>
42     <div>
43         <div id="left" style="width: 10%; float: left">
44             <ul id="ul4Names">
45             </ul>
46         </div>
47         <div id="rightDiv" style="margin-left: 35px;">
48             <table>
49                 <thead>
50                     <tr>
51                         <td>名稱</td>
52                         <td>備註</td>
53                     </tr>
54                 </thead>
55                 <tbody>
56                     <tr>
57                         <td class="tdName"></td>
58                         <td class="tdRemark"></td>
59                     </tr>
60                 </tbody>
61             </table>
62         </div>
63     </div>
64 </body>
65 </html>

前臺 data-屬性

效果：app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。