我已经设置了一个模态叠加层,并且这个代码可以简化,我只是不知道该怎么做。
理论上会有超过6个代码块,所以理想情况下这应该尽可能多地处理。 ID(1到6)是使用PHP动态生成的。
jQuery(function ($) {
// Load dialog on click
$('.open-modal-overlay-1').click(function (e) {
$('#modal-overlay-1').modal();
return false;
});
$('.open-modal-overlay-2').click(function (e) {
$('#modal-overlay-2').modal();
return false;
});
$('.open-modal-overlay-3').click(function (e) {
$('#modal-overlay-3').modal();
return false;
});
$('.open-modal-overlay-4').click(function (e) {
$('#modal-overlay-4').modal();
return false;
});
$('.open-modal-overlay-5').click(function (e) {
$('#modal-overlay-5').modal();
return false;
});
$('.open-modal-overlay-6').click(function (e) {
$('#modal-overlay-6').modal();
return false;
});
});
有人可以帮忙吗?
答案 0 :(得分:3)
最佳实施取决于我们可以假设您的其他标记的因素。
我们可以假设所有 open-modal-overlay-*
应该有这个点击监听器吗?
我们可以假设这是他们拥有的唯一的类吗?在这种情况下,我们可以做类似的事情:
$('*[class^=open-modal-overlay-]').click(function() {
var id = $(this).attr('class').slice(-1); // last char of "class" attribute
$('#modal-overlay-'+id).modal();
});
如果我们不能假设这是他们唯一的类,那么我们就不能像这样使用.attr('class')
,也不能使用“class attribute starts with”选择器class^=
。如果他们都有另一个共同的类,这对他们来说是独一无二的,我们可以通过$('.open-modal-overlay')
更好地访问它们(如果他们的类属性是class="open-modal-overlay open-modal-overlay-2"
等)。
如果没有,我们必须使用“class attribute contains”选择器class*=
,或者只是指定选择器:
$('.open-modal-overlay-1, .open-modal-overlay-2, .open-modal-overlay-3, .open-modal-overlay-4, .open-modal-overlay-5, .open-modal-overlay-6').click(function() {
...
});
我们无法像这样导出id
变量,所以我们必须做类似的事情:
var id = $(this).attr('class').replace(/^.*open-modal-overlay-(\d+).*$/, '$1');
答案 1 :(得分:0)
怎么样:
$([1, 2, 3, 4, 5, 6]).each(function (i, e) {
$('.open-modal-overlay-' + e).click(function () {
$('#modal-overlay-' + e).modal();
return false;
})
});