鍍金池/ 問答/HTML5  HTML/ 如何點(diǎn)擊A標(biāo)簽后動(dòng)態(tài)添加 data-id : 1/ data-id : 2/da

如何點(diǎn)擊A標(biāo)簽后動(dòng)態(tài)添加 data-id : 1/ data-id : 2/data-id : 3....以此類推...

各位大神好,就之前提問后得到各位大佬的幫助,小弟我受益匪淺,畢竟從做UI轉(zhuǎn)到前端這塊真的是宇宙超級(jí)無敵難....更何況沒接觸過JQ/JS...HTML+CSS還是懂個(gè)一丟丟....看了幾篇教程之后就被趕鴨子上架了.主要是公司小,人也少,但這也是對(duì)自己能力提升的最好機(jī)會(huì),逼自己去學(xué).....

所以,我又遇到難題來提問了...
就是 如何點(diǎn)擊A標(biāo)簽后動(dòng)態(tài)添加 data-id : 1/ data-id : 2/data-id : 3....以此類推...
比如最終實(shí)現(xiàn)成為一下結(jié)果:

<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來做動(dòng)態(tài)添加,但就是不懂怎么讓它點(diǎn)擊后 data-id 后面自動(dòng)的顯示1/2/3/4/5/ 添加多少個(gè)就顯示多少個(gè)data-id
可能我問的問題有點(diǎn)白癡...但希望各位大佬能幫幫我

最后再次謝謝各位幫助過我的大佬~ 愛你們

回答
編輯回答
熟稔

`
$("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);
    });

`

2017年8月25日 00:51
編輯回答
吃藕丑

假如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++)
    })
})
2018年5月28日 04:17
編輯回答
風(fēng)畔

這是我的想法，你直接復(fù)制粘貼運(yùn)行便可，希望能幫助到你：

<!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>
2017年5月8日 08:25