问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何点击A标签后动态添加 data-id : 1/ data-id : 2/data-id : 3....以此类推...

头像
超级搔痒人
    24714

    各位大神好,就之前提问后得到各位大佬的帮助,小弟我受益匪浅,毕竟从做UI转到前端这块真的是宇宙超级无敌难....更何况没接触过JQ/JS...HTML+CSS还是懂个一丢丢....看了几篇教程之后就被赶鸭子上架了.主要是公司小,人也少,但这也是对自己能力提升的最好机会,逼自己去学.....

    所以,我又遇到难题来提问了...
    就是 如何点击A标签后动态添加 data-id : 1/ data-id : 2/data-id : 3....以此类推...
    比如最终实现成为一下结果:

    <ul>
    <li data-id=1></li>
    <li data-id=2></li>
    <li data-id=3></li>
    <li data-id=4></li>
    <li data-id=5></li>
    ...
</ul>
<a href="javascript:;">GOGOGO</a>

    我知道用each来做动态添加,但就是不懂怎么让它点击后 data-id 后面自动的显示1/2/3/4/5/ 添加多少个就显示多少个data-id
    可能我问的问题有点白痴...但希望各位大佬能帮帮我

    最后再次谢谢各位帮助过我的大佬~ 爱你们

    jqueryhtml5
    阅读 3.9k
    3 个回答
    得票最新
    头像
    luozz
      5.8k3629
      ✓ 已被采纳

      这是我的想法，你直接复制粘贴运行便可，希望能帮助到你：

      <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <p>
        <a href="javascript:;">GOGOGO</a>
    </p>
    <ul id="uls">
    </ul>
    <script>
        $("a").on("click", function() {
            var len = $("#uls li").length;
            var tmp = "<li data-id=" + (len + 1) + ">" + (len + 1) + "</li>";
            $("#uls").append(tmp);
        });
    </script>
</body>
</html>
      头像
      Maxiye
        64816

        假如a上id为a_id，ul的id为ul_id:

        let i = 0;
$("#a_id").click(function(){
    $("ul_id").find("li").each(function(k, v){
        $(v).data('id', i++)
    })
})
        头像
        你要继续加油哦
          43311932

          `
          $("a").on("click", function() {

                  var index = $("ul:last-child").attr('data-id');
        if(typeof(len )=="undefined"){
            index = 0;
        }
        var tmp = "<li data-id=" + (index + 1) + ">" + (index + 1) + "</li>";
        $("ul").append(tmp);
    });

          `

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题