Jquery 按id选择生成的div

我有一个jquery代码，它在for循环中生成div。这些div获得的id就像“id”+索引（循环中的索引+），并添加到另一个div中。 一切都按预期进行，但现在我想在鼠标悬停或单击其中一个生成的div时创建一个函数。div同时显示，div的数量不是恒定的。当我只知道div的id是“id”+索引时，如何直接选择div

以下是生成div的代码：

NUM2 = NUM;
for(i = 0;NUM2>0;i++,NUM2--)
    {
    $("#imageBox").clone().attr('id',"imageBox"+NUM2).prependTo(DIV);
    $('#imageBox'+NUM2).css({
        backgroundImage:"url('pic')"
        backgroundRepeat:'no-repeat',
        backgroundSize:'contain',
        width:'100px',
        height:'100px',
        margin:'4px',
        float:'left',
    });

我曾想过创建一个循环，并用循环的索引检查“id”+索引，但它不起作用。 以下是我尝试过的：

for(i=0;i<NUM;i++)
    {
    if($('#imageBox'+NUM).attr('id') = '#imageBox'+i)
        {
            $('#imageBox'+NUM).mouseenter(function()
                    {
                        $(this).css(
                            {
                                opacity:1,
                                border: '1px solid white',
                            });
                    });
            $('#imageBox'+NUM).mouseleave(function()
                    {
                        $(this).css(
                            {
                                opacity:0.6,
                                border: '0px solid white',
                            });
                    });

            $('#imageBox'+NUM).click(function()
                    {
                        alert("test");
                    });
        }
    }

---

for（i=0；i您不必单独设置处理程序。为div指定一个类并使用带有委托的事件处理程序：

$(document).on({
    mouseenter: function () {
        $(this).css({
            opacity: 1,
            border: '1px solid blue'
        });
    },
    mouseleave: function () {
        $(this).css({
            opacity: 1,
            border: '1px solid white'
        });
    },
    click: function () {
        alert('hi');
    }
}, '.imagebox');

您不必单独设置处理程序。为div指定一个类，并使用具有委托的事件处理程序：

$(document).on({
    mouseenter: function () {
        $(this).css({
            opacity: 1,
            border: '1px solid blue'
        });
    },
    mouseleave: function () {
        $(this).css({
            opacity: 1,
            border: '1px solid white'
        });
    },
    click: function () {
        alert('hi');
    }
}, '.imagebox');

如果你正在创建div，你可以给它们一个公共类或数据属性，你可以在以后关闭它。例如，你已经在它们上面显式地设置了CSS，但是如果你有一个名为imageClass的CSS类，那么你所要做的就是在你的CSS文件中设置这些属性一次，所有的克隆都会有相应的属性泰式

其次，您可以在css类$（“.imageBox”）中键入click、mouse enter和mouse leave事件，通过在数据属性中输入'NUM'变量值，您可以执行$（this.data（'NUM'）以确定您在事件中使用的是哪个DIV（如果需要的话）
如果您要创建div，您可以为它们提供一个公共类或数据属性，稍后可以将其关闭。例如，您已经在它们上显式设置了CSS，但是如果您有一个名为imageClass的CSS类，那么您所要做的就是在CSS文件中一次性设置这些属性，所有克隆都将具有相应的权限priate风格

其次，您可以在css类$（“.imageBox”）中键入click、mouse enter和mouse leave events，并通过在数据属性中输入'NUM'变量值，您可以使用$（this.data（'NUM'）来确定您在事件中使用的DIV（如果这是一个要求）
，使用
id
您不能选择
imageBox
+
，但您可以通过使用属性前缀选择器
[attr^=val]
检查
id
是否以
imageBox
开头来接近它

$('[id^=imageBox]')
    .mouseenter(function () {
        $(this).css({
            opacity: 1,
            border: '1px solid white',
        });
    })
    .mouseleave(function () {
        $(this).css({
            opacity: 0.6,
            border: '0px solid white',
        });
    })
    .click(function () {
        alert("test");
    });

使用
类
但是，理想情况下，您应该将
imageBox
类添加到每个元素中，这将简化选择器，提高性能，并使代码更漂亮：

$('.imageBox')


如果在使用类时需要保留数字，并且不能依赖元素的索引，那么最好将其添加到“data-”属性中

<div class="imageBox" data-number="2">...</div>

使用
id
您不能选择
imageBox
+
，但您可以通过使用属性前缀选择器
[attr^=val]
检查
id
是否以
imageBox
开头来接近它

$('[id^=imageBox]')
    .mouseenter(function () {
        $(this).css({
            opacity: 1,
            border: '1px solid white',
        });
    })
    .mouseleave(function () {
        $(this).css({
            opacity: 0.6,
            border: '0px solid white',
        });
    })
    .click(function () {
        alert("test");
    });

使用
类
但是，理想情况下，您应该将
imageBox
类添加到每个元素中，这将简化选择器，提高性能，并使代码更漂亮：

$('.imageBox')


如果在使用类时需要保留数字，并且不能依赖元素的索引，那么最好将其添加到“data-”属性中

<div class="imageBox" data-number="2">...</div>

您还可以在创建div时指定click和mouseleave处理程序

 var imgBox= $("#imageBox").clone().attr('id',"imageBox"+NUM2)
                         .mouseleave(function () 
                         {
                            $(this).css({
                                         opacity: 0.6,
                                         border: '0px solid white',
                                       });
                         })
                         .click(function () {
                                            alert("test");
                                            });

 imgBox.prependTo(DIV);

您还可以在创建div时指定click和mouseleave处理程序

 var imgBox= $("#imageBox").clone().attr('id',"imageBox"+NUM2)
                         .mouseleave(function () 
                         {
                            $(this).css({
                                         opacity: 0.6,
                                         border: '0px solid white',
                                       });
                         })
                         .click(function () {
                                            alert("test");
                                            });

 imgBox.prependTo(DIV);