Question

我试图理解如何动态地增加JS中的div ID。

我每次都会添加类似的DIV，但它们是不同的元素。

让我们考虑这个简单的例子来澄清我想要理解的内容;

<div class="test" id="b1">
    One
</div>


<div class="test" id="b2">
    Two 
</div>

<div class="test" id="b3">
    Three
</div>

<div class="test" id="b4">
    Four
</div>

你可以注意到这个脚本里面有一个循环，它们都是从同一个div继承的，但它们用不同的ID标注。

$('#b1').click(function() {
    alert('I am first button');
});

$('#b2').click(function() {
    alert('I am second button');
});

$('#b3').click(function() {
    alert('I am third button');
});


$('#4').click(function() {
    alert('I am fourth button');
});

我正在添加超过100个相同DIv的DIv;但我需要以不同方式对它们进行注释，因此当我点击每个div时我可以应用效果。

为了做到这一点，我需要了解什么？

DEMO：http://jsfiddle.net/sL8nbx1w/2/

更新

有些人误解了我，我想做的是生成div以及

<div class="test" id="HOW_CAN_I_Make_VARIABLES">
    One <span class="alertmsg">custom message for this button + HOW_CAN_I_Make_VARIABLES</span>
</div>

在某种程度上，我可以做一些像

这样的事情

# for every variable I have  
$('.HOW_CAN_I_Make_VARIABLES').click(function() {
    alert('I am button #' + HOW_CAN_I_Make_VARIABLES_Index);
});

Answer 1

您可以通过CSS类附加事件，并使用event.target.id获取被点击元素的ID：

$('div.test').click(function(event) {
    alert('I am  button with id: '+event.currentTarget.id);
});

此外，您可以使用each函数获取所有元素，并更改其属性，如：

$('.test').each(function (index) {
    alert("iterating element "+$(this).attr(id));
}

Answer 2

<div id="container">
 <div></div>
 <div></div>
</div>
<script>
    $(function(){
    var i=0;
    $('#container').find('div').each(function(){
        var temp='b'+i;
        $(this).attr('id',temp);
        ++i;
        console.log($(this).attr('id'));
    });
  });
</script>

Answer 3

http://jsfiddle.net/vpzpxzx0/

// method 1
$('.test').click(function() {
    alert('I am ' + $(this).text().trim());
});

// method 2 (advanced js usage)
for(var i=1; i <= 4; i++) {
    (function(){
        var myId = i;
        $('#b' + i).click(function() {
            alert('I am ' + myId);
        });
    })();
}

Answer 4

创建一个each（）函数，而不是给出id。＃。删除当前的ID并让该功能为您创建它们：

http://jsfiddle.net/austinthedeveloper/sL8nbx1w/3/

$('.test').each(function (index) {
    var value = index + 1;
    $(this).attr('id', 'b' + value);
});

Answer 5

试试这个：

$('.test').click(function() {
    alert('I am button #' + ($(this).index() + 1));
});

JS DEMO

Answer 6

添加其他人发布的内容 - 更具灵活性。每个按钮都知道它将要发出警告的消息（基于blex的代码：http://jsfiddle.net/nbjgr5zh/3/）：

<div class="test">
    One <span class="alertmsg">custom message for this button 1</span>
</div>


<div class="test">
    Two <span class="alertmsg">custom message for this button 2</span>
</div>

<div class="test">
    Three <span class="alertmsg">custom message for this button 3</span>
</div>

$('.test').click(function() {
alert('alert from button #' + ($(this).index() + 1)+ ': '+$(this).find(".alertmsg").text());
});

.test {
    height:100px;
    width:100px;
    border: 1px solid black;
}

.test > .alertmsg {
    display: none;
}

Answer 7

向div添加数据属性：

<div class="div-clickable" id="div1" data-id="1"></div>

在你的js上：

$('.div-clickable').click(function(e){

    var divclicked = $(this).attr("data-id");

    alert("I am div" + divclicked);

})

如何动态增加JS中的div ID

7 个答案: