-1

如果我们单击每个 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>");

    }
}
4

3 回答 3

0

嘿,使用它会生成动态 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/

于 2013-09-17T10:42:24.203 回答
0

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

例如:单击时,如果您需要 div 的 id,则可以添加onclick属性div并将其传递给函数

演示

更新:演示 2

于 2013-09-17T10:46:34.587 回答
0

请不要使用 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());
});
于 2013-09-17T10:51:35.023 回答