动态拼接LI列表

        $(".oRightBottom_left_nav .oLiXian").click(function(){
            alert('11');
            var comId = "{{$comp_id}}";
            $.ajax({
                type:'post',
                url: "{{url('query/getCmpVolume')}}",
                data:'comId='+comId,
                success: function(msg){
                    alert(msg);
                    var info = msg[0].split(",");
                    //alert(info[1]);
                    //alert(info[0]);
                    if(info){
                        $(".filetent").html(info[1]+'MB可以用 ,'+' 共'+info[0]+'MB。');
                        var htmlString =[];
                        //alert(22);

                        //htmlString.push( ' < div class="fileslist" > ');
                        htmlString.push( '<ul id="news-list">');
                        for (var i = 1,len=msg.length; i < len; i++) {
                            //NEW=NEWS[i];
                            var file = msg[i].split(",");
                            var href = file[1];
                            htmlString .push('<li class=\"leftT\"><a href="/query/tableid/?tableid='+href+'">'+file[0]+'</a></li>');
                            htmlString .push('<li class=\"rightT\"><a href="#" οnclick="delete_eva('+href+')">'+"删除"+'</a></li>');
                        }
                        //alert(33);
                        htmlString.push( '</ul>'); // < /div >
                        htmlString=htmlString.join("");
                        //alert(44);
                        alert(htmlString);
                        $(".filelist").html(htmlString);
                    }else{
                        alert('error');
                    }
                }
            });
        })

以下是一个示例,演示如何使用 JavaScript 动态拼接带点击方法的页面: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动态拼接带点击方法的页面</title> </head> <body> <div id="container"></div> <script> // 获取容器元素 const container = document.getElementById('container'); // 定义要拼接的内容 const html = '<h1>动态拼接带点击方法的页面</h1>' + '<p>这是一个使用 JavaScript 动态拼接带点击方法的页面的例子。</p>' + '<ul>' + '<li><a href="#" data-value="value1">列表项1</a></li>' + '<li><a href="#" data-value="value2">列表项2</a></li>' + '<li><a href="#" data-value="value3">列表项3</a></li>' + '</ul>'; // 将内容添加到容器中 container.innerHTML = html; // 获取列表元素 const list = container.querySelector('ul'); // 为列表项添加点击事件 list.addEventListener('click', function(event) { // 阻止默认行为 event.preventDefault(); // 获取点击的列表项元素 const target = event.target; // 如果点击的是列表项中的链接元素,则处理点击事件 if (target.tagName === 'A') { const value = target.getAttribute('data-value'); alert('你点击了 ' + target.textContent + ',值为:' + value); } }); </script> </body> </html> ``` 在上面的示例中,首先定义了要拼接的内容,其中包含一个带有 `data-value` 属性的链接元素,用于传递值。然后使用 `innerHTML` 属性将内容添加到容器中。 接着,通过 `querySelector` 方法获取到了 `ul` 元素,并使用 `addEventListener` 方法为其添加了点击事件。在事件处理程序中,首先阻止了默认行为,然后获取到了点击的列表项元素,并判断其是否是链接元素。如果是链接元素,则获取其 `data-value` 属性的值,并弹出一个提示框,显示点击的是哪一项,以及该项的值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值