Question

如果我们点击每个div，如何从以下小提琴http://jsfiddle.net/ramapriya/FJhDw/2/中获取动态生成div的id并显示不同的消息

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

var columns = 10, container = $("#container"), width = (100 / columns);

$("head").append("<style>.col { width: " + width + "%;} .row {  height: " + width + "%  }</style>");

for(var ii = 0; ii < columns; ii++) {
    container.append("<div class=\"row\" />");
    row = $("#container > div:last-child");

    for(var i = 0; i < columns; i++) {

        row.append("<div class=\"col\" style=\"background: " + get_random_color() + "\">szin</div>");

    }
}

Answer 1

嘿，使用它会生成动态ID，当你点击任何div时，它会显示带有div id的警告： -

row.append("<div id=\"div_" + ii + "_" + i + "\" onclick=\"alert(this.id)\" class=\"col\" style=\"background: " + get_random_color() + "\">sample</div>");

这是小提琴： - http://jsfiddle.net/FJhDw/5/

Answer 2

要指定div，您应该为每个id提供div，并且您可以在创建时为每个div执行javascript函数。

例如：如果您需要div的id，请点击，然后您可以将onclick属性添加到div并将其传递给函数

请参阅Demo

已更新：Demo 2

Answer 3

请不要使用onclick属性;不属于您的HTML，因为它与布局或外观无关。将您的功能保留在它所属的JS中。只需使用迭代器实现ID方案，如下所示，并定义一个单击处理程序。

请在http://jsfiddle.net/XXd6z/查看此示例。另外，请注意我已经清理了您之前难以阅读的元素生成。 jQuery可以轻松地动态创建漂亮的元素。

var columns = 10,
    container = $("#container"),
    width = (100 / columns);

$("head").append("<style>.col { width: " + width + "%;} .row {  height: " + width + "%  }</style>");

for (var ii = 0; ii < columns; ii++) {
    var $row = $("<div />", {
        class: "row"
    });
    container.append($row);

    for (var i = 0; i < columns; i++) {
        var $col = $("<div />", {
            class: "col",
            style: "background: " + get_random_color() + ";",
            html: "sample",
            id : ii + "-" + i
        });
        $row.append($col);
    }
}

$("div.col").click(function () {
    alert(this.id + " " + $(this).html());
});

如何获取动态生成div的id并使用该id显示消息？

3 个答案: