當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

动态生成li标签，并设置点击事件

發布時間：2024/6/21 综合教程 34 生活家

生活随笔收集整理的這篇文章主要介紹了动态生成li标签，并设置点击事件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

今天要解釋的是如下界面

主要實現了：

1.模擬后臺的json數據，動態生成li標簽

2.導航欄的下劃線

3.給li標簽右邊設置圖片

4.動態生成的li標簽，設置選中的li的點擊事件，將右邊的圖片換掉

完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">-->
    <link rel="stylesheet" >
    <title>頁面一</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            height: 100%;
            background: gainsboro;
        }
        .wrap{
            height: 100%;
        }

        #nav ul{
            margin: 10px;
        }
        #title{
            width: 100%;
            height: 100px;
            background-color: red;
        }

        #nav{
            width: 100%;
            height: 20%;
            background-color: white;
        }
        #nav li{
            display: inline-block;
            width:25%;
            height:20%;
            float: left;

        }
        #nav li a{
            color: #0f0f0f;
            text-align: center;
            font-size: 40px;
        }
        #nav ul li a:hover{
            color:red;
        }

        /*通過span設置下劃線*/
        #nav ul li a:hover span{
            padding-bottom: 17px;
            border-bottom:  2px solid ;
        }

        .item{
            padding: 40px;
            margin-top: 40px;
            margin-right: 40px;
            margin-bottom: 40px;
            border-radius: 25px;
            //給li標簽右邊設置圖片
            background: red url('../2.png')  no-repeat right center;
        }
        .i1{
            padding: 40px;
            margin-top: 40px;
            margin-right: 40px;
            margin-bottom: 40px;
            border-radius: 25px;
            background: red url('../1.png')  no-repeat right center;

        }

    </style>
</head>
<body>
<div class="wrap">

    <div id="title">
        我是標題
    </div>

    <div id="nav">
        <ul class="nav nav-bar">
         <li><a href="#" onclick="show1()"><span>個人資料</span></a></li>
         <li><a href="#" onclick="show2()"><span>信息</span></a></li>
         <li><a href="#" onclick="show3()"><span>產品兌換</span></a></li>
         <li><a href="#" onclick="show4()"><span>兌換歷史</span></a></li>
        </ul>
    </div>

    <div id="content">
      <ul id="list">

      </ul>
     </div>

</div>


</body>

<script>
    function  show1() {
        //var obj = jQuery.parseJSON('{"name":"John","age":"20"}');
        //第一種
        //$("#list").html("<table><tr><td>" + obj.name + "</td><td>" + obj.age + "</td></tr></table>");


        //第三種
//        var data = [{"name":"張三", "age":"21"},{"name":"李四", "age":"21"},{"name":"王五", "age":"21"}];
//        for(var i=0;i<data.length;i++){
//            var a = "<li>姓名：" + data[i].name + ",年齡: "+ data[i].age +"</li>";
//            $("#list").append(a);
//        }


//第二種

            $.ajax({
                url: 'data1.json',    //在后文后有元數據
                type: 'GET',
                dataType: 'json',
                timeout: 1000,
                cache: false,
                beforeSend: LoadFunction, //加載執行方法
                error: erryFunction,  //錯誤執行方法
                success: succFunction //成功執行方法
            })
            function LoadFunction() {
                $("#list").html('加載中...');
            }
            function erryFunction() {
                alert("error");
            }
            function succFunction(tt) {
                $("#list").html('');

               // eval將字符串轉成對象數組
//                var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" };
//                json = eval(json);
//                alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email);

                var json = eval(tt); //json數組
                var str="";

                $.each(json, function (index) {
                    //循環獲取數據
                    var id = json[index].id;
                    var name = json[index].name;

                    //$("#list").html($("#list").html() + "<br>" + id + " - " + name + "<br/>");
                   //alert(id);

                    str += "<li class='item'>"+id+"<br>"+name+"</li>";
                    $("#list").html($("#list").html() + str);

                    //我想其實應該是這樣的：當你點擊某一項的時候，會進入一個URL，來進行更改數據庫的操作。
                    //系統怎么識別出來你點擊的是哪一項？
                    //jQuery中如何判斷當前點擊的是第幾個li，使用$(this).index()取得li的下標

                });

                $("#content #list .item").click(function () {
                    alert($(this).index());
                    $(this).toggleClass("i1");
                });

            }
    }
//function  show2()  show3()  show4()的實現和show1()原理是一樣的，這里就不再寫了。

</script>
</html>

上邊所模擬的數據data1.json

   [
    {
      "id":"EWVEB1",
      "name":"車票從任何云頂長途快車車站至纜車站"
    },
    {
      "id":"EWVEB2",
      "name":"車票從任何云頂長途快車車站至纜車站"
    },
    {
      "id":"EWVEB3",
      "name":"車票從任何云頂長途快車車站至纜車站"
    },
    {
      "id":"EWVEB4",
      "name":"車票從任何云頂長途快車車站至纜車站"
    },
    {
      "id":"EWVEB5",
      "name":"車票從任何云頂長途快車車站至纜車站"
    },
    {
      "id":"EWVEB6",
      "name":"車票從任何云頂長途快車車站至纜車站"
    },
    {
      "id":"EWVEB7",
      "name":"車票從任何云頂長途快車車站至纜車站"
    },
    {
      "id":"EWVEB8",
      "name":"車票從任何云頂長途快車車站至纜車站"
    },
    {
      "id":"EWVEB9",
      "name":"車票從任何云頂長途快車車站至纜車站"
    },
    {
      "id":"EWVEB10",
      "name":"車票從任何云頂長途快車車站至纜車站"
    }
   ]

總結

以上是生活随笔為你收集整理的动态生成li标签，并设置点击事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。