1

我有一个在 for 循环中生成 div 的 jquery 代码。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”+index，但它不起作用。这是我尝试过的：

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");
                    });
        }
    }

我希望你能帮帮我

干杯

4

4 回答 4

1

如果您正在创建 div，您可以为它们提供一个通用的类或数据属性，然后您可以稍后将其关闭。例如，您已经在它们上明确设置了 CSS，但是如果您有一个名为 imageClass 的 CSS 类，那么您所要做的就是在您的 CSS 文件中设置一次这些属性，并且所有克隆都将具有适当的样式。

其次，您可以在 css 类 $(".imageBox") 中键入单击、鼠标输入和鼠标离开事件，并将“NUM”变量值放入数据属性中，您可以执行 $(this).data( 'Num') 以确定您在事件中使用的 DIV（如果这是要求）

于 2013-10-16T19:35:47.050 回答
0

您不必单独设置处理程序。给 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');
于 2013-10-16T19:35:38.457 回答
0

使用id

您不能选择imageBox+但您可以通过使用属性前缀选择器检查开头<num>是否足够接近。idimageBox[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类​​添加到每个元素中，这将简化选择器，提高性能并使代码更好：

$('.imageBox')

这是两种方法的演示。

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

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

悬停事件的 CSS

如果mouseenterandmouseleave事件纯粹是出于风格原因，我建议使用 CSS and:hover来代替。这种方法的另一个好处是元素的初始状态（部分透明）将是正确的，而您需要对 JS 进行调整以使其按预期工作。

.imageBox {
  opacity: 0.6;
  border: 0px solid white;
}
.imageBox:hover {
  opacity: 1;
  border: 1px solid white;
}
于 2013-10-16T19:37:11.957 回答
0

您还可以在创建 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);
于 2013-10-16T19:44:01.300 回答