结合多个jQuery函数

Question

有没有办法将所有这些结合起来减少js的数量？这只是我网站上的一些jquery对话框的一个例子,还有一些对话框.谢谢.

//initiate Search refinement dialog here
$("#chooseMoreCnt, #chooseMoreCat, #chooseMorePr").dialog({
    bgiframe: true,
    autoOpen: false,
    width: 500,
    modal: true,
    open: function(type, data) {
        $(this).parent().appendTo(jQuery("form:first"));
    }
});

//trigger country dialog
$('a.chooseMoreCnt').click(function() {
    $('#chooseMoreCnt').dialog('open');
    return false;
});

//trigger category dialog
$('a.chooseMoreCat').click(function() {
    $('#chooseMoreCat').dialog('open');
    return false;
});

//trigger price dialog
$('a.chooseMorePr').click(function() {
    $('#chooseMorePr').dialog('open');
    return false;
});

Answer 1

如果链接指向对话框元素的ID,并且如果choose向每个元素添加元类,则可以将最后三个调用组合为:

$('a.choose').click(function() {
    $(this.hash).dialog('open');
    return false;
});

其中一个链接的HTML在语义上最正确,甚至可以在禁用JS的情况下使用(假设,对话框在那里):

<a href="#chooseMoreCat" class="choose">Choose more categories</a>

该this.hash部分解释说:

• this在jQuery事件处理函数的上下文中始终是事件出现的元素.在我们的例子中,它是点击的链接.注意,它是DOM节点,而不是jQuery元素.

• this.hash:与HTML 元素对应的DOM节点<a/>具有某些特殊属性,允许访问它们要链接的目标.该hash属性是#URL中的一个字符之后的所有内容(包括).在我们的例子中,如果链接指向应该成为对话框的元素,它就像字符串"#chooseMoreCnt".

• $(this.hash)是调用的jQuery函数,例如,"#chooseMoreCnt"它将选择适当的div.

对于对话框初始化,我也会去上课:

$(".choose_dialog").dialog({
    bgiframe: true,
    autoOpen: false,
    width: 500,
    modal: true,
    open: function(type, data) {
        $(this).parent().appendTo(jQuery("form:first"));
    }
});

是的,这意味着要更改标记,但它也为您提供了自由

1. 稍后添加任意数量的对话框

2. 在任何对话框中添加任意数量的开启者

3. 使用最少的CSS来设置所有对话框和对话框的链接

没有触及Javascript了.

如果对话框的启动方式不同(如注释中所述),那么您可以使用CuSS的$.each()方法进行此部分,并从其他地方定义的对象中读取函数内部的相应宽度:

var dialog_widths = {'chooseMoreCat': 400, 'chooseMorePr': 300, /*...*/ };