通过id选择生成的div

Question

我有一个jquery代码，它在for循环中生成div。 div正在获取id，就像“id”+ index（循环中的index ++），并被添加到另一个div中。 一切都按预期工作，但现在我想在鼠标悬停或单击其中一个生成的div时创建一个函数。 div同时显示，div的数量不是恒定的。当我所知道的div的id是“id”+ index？

时，我怎么能直接选择一个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");
                    });
        }
    }

我希望你能帮助我

欢呼声

Answer 1

如果您正在创建div，则可以为它们提供一个公共类或数据属性，然后您可以关闭它。例如，您已经明确地在它们上设置CSS，但如果您有一个名为imageClass的CSS类，那么您只需要在CSS文件中设置这些属性一次，并且所有克隆都具有相应的样式。 / p>

其次，您可以将您的点击，鼠标输入和鼠标离开事件键入css类$（“。imageBox”），并将'NUM'变量值放在您可以执行的数据属性中$（this） .data（'Num'）找出你在事件中使用的DIV（如果这是一个要求）

Answer 2

您不必单独设置处理程序。给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');

Answer 3

使用id

您无法选择imageBox + <num>，但是您可以通过使用属性前缀选择器{{1}检查id是否以imageBox开头来获得足够接近}。

[attr^=val]

使用$('[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"); });

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

imageBox

Here is a demo of both approaches.

如果你需要在使用类时保留数字而不能依赖元素的索引，那么理想情况下你应该将它添加到`data-'属性。

$('.imageBox')

悬停事件的CSS

如果<div class="imageBox" data-number="2">...</div> 和mouseenter事件完全出于文体原因，我建议您使用CSS和mouseleave。这种方法的另一个好处是元素的初始状态（部分透明）是正确的，而你需要调整JS以使其工作成为意图。

:hover

Answer 4

您还可以在创建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);