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始终是事件出现的元素。在我们的例子中，它是点击的链接。请注意，它是 DOM节点，而不是jQuery元素。
this.hash： DOM节点，对应于HTML <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"));
    }
});

是的，这意味着更改标记，但它也为您提供了

的自由

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

不再触及Javascript。

如果对话框的启动方式不同（如评论中所述），那么您可以使用CuSS的$.each()方法来获取此部分，并从其他地方定义的对象中读取函数内部的相应宽度：

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

Answer 2

这就是我的建议。为所有div指定一般的DialogContent（say）类，并使用以下命令对其进行初始化：

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

当然使用Boldewyn的点击事件解决方案（如果事情是动态生成的话，最好使用live（）恕我直言）。这样，您可以使用更少的代码来处理所有初始化和单击事件。

HTH

Answer 3

嗯，最小化这个有点复杂。你有超过3个对话框吗？如果是，你可以这样做：

var dialogs=["chooseMorePr","chooseMoreCat","chooseMoreCnt"];
$.each(dialogs,function(i,v){
    $('a.'+v).click(function(){$('#'+v).dialog('open');});
});

Answer 4

为了优化性能，您应该在连接到多个元素时使用live。以下是我解决问题的方法。解决方案是动态的（添加尽可能多的对话框）并且速度非常快。

请记住将#anyParentOfTheLinks更改为父div，或者在最坏的情况下将其删除，jQuery将使用文档代替。

var dialogues = ['#chooseMoreCnt', '#chooseMoreCat', '#chooseMorePr'];

$(dialogues.toString()).dialog({
    // ...
});

$('a', '#anyParentOfTheLinks').live('click', function(){
    // Cache for performance
    var $this = $(this), len = dialogues.length;

    for(var i = 0; i < len; i++)
        if($this.is('.' + dialogues[i].substr(1))) {
            $this.dialog('open');
            break;
        }

    return false;
});

结合多个jQuery函数

4 个答案: