Question

我已经设置了一个带有模态的页面，但目前它只适用于页面上有一个模态。

我想要实现的是在Jquery中应用id，这样每个模态都有自己的ID并打开多个模态。

HTML：

<a class="activator1" id="activator1"><img class="edit_icon" align="right" src="/images/edit_icon.png" alt="">Edit</a>
<div class="box1" id="box1">
    <h3>Title here</h3>
    <p>Text in here</p>
</div>`
<a class="activator2" id="activator2"><img class="edit_icon" align="right" src="/images/edit_icon.png" alt="">Edit</a>
<div class="box2" id="box2">
    <h3>Title here</h3>
    <p>Text in here</p>
</div>

Jquery的

$(function(){
    $('#activator').click(function(){
        $('#overlay').fadeIn('fast',function(){
            $('#box').animate({'top':'80px'},500);
        });
    });
    $('#boxclose').click(function(){
        $('#box').animate({'top':'-1400px'},500,function(){
            $('#overlay').fadeOut('fast');
        });
    });
});

Answer 1

不要使用独特的类，让它们在常见元素中保持通用。如果需要样式化，请使用辅助类

一个简单的数据属性可以用于目标，可以使用data()方法

来读取

<a class="activator" id="activator1" data-target="#box1>

然后使用class for click handler selector

$('.activator').click(function(){
   // "this" is element event occurred on
   var modalTargetSelector = $(this).data('target');
   $('#overlay').fadeIn('fast',function(){
        $(modalTargetSelector ).animate({'top':'80px'},500);
   });

});

类似地，关闭按钮使用公共类并执行以下操作：

 $('.boxclose').click(function(){
    $(this).closest('.box').animate({'top':'-1400px'},500,function(){
        $('#overlay').fadeOut('fast');
    });
});

如何在Jquery中添加ID？

1 个答案: