結合多個jQuery功能

有沒有什麼辦法可以將所有這些結合起來以減少js的數量？這只是我在我的網站中的一些jquery對話框的一個例子，還有一些。謝謝。結合多個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; 
});

來源

2010-04-14 Mark

如果你的鏈接指向的對話框元素的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部分解釋：

在一個jQuery事件處理函數的上下文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

consistantly對話沒有再接觸的JavaScript。

如果對話發起不同（如在評論中提到的），那麼你可以去這部分與CUSS的$.each()方法，並從其他地方定義的對象讀函數內部的相應寬度：

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

來源

2010-04-14 11:36:44 Boldewyn

+1使用'this.hash'。 – 2010-04-14 11:40:02

散列做什麼？但是這樣他不得不修改html結構，你知道他是否只有3個或更多？ – CuSS 2010-04-14 11:43:46

想知道它。什麼是散列？ – meo 2010-04-14 11:46:09

-1

嗯，這是有點複雜的最小化。你有超過3個對話框嗎？如果是的話，你可以這樣做：

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

來源

2010-04-14 11:42:29 CuSS

如果有超過3個對話框（編寫一個通用解決方案時必須考慮到），那麼在每個元素上添加一個事件處理程序將會非常耗費性能。另外，使用$ .each比for循環慢。 – Simeon 2010-04-14 12:33:08

$ .each-loop如果指定一個數組，而不是標識符，就像for循環一樣。請閱讀jQuery Docs（http://api.jquery.com/jQuery.each/）！ – CuSS 2010-04-14 13:26:41

「$ .each（）函數與.each（）函數不同，它用於遍歷一個jQuery對象。$ .each（）函數可用於迭代任何集合，無論它是一個映射（JavaScript對象）或數組，在數組的情況下，每次回調都會傳遞一個數組索引和一個相應的數組值（該值也可以通過this關鍵字訪問）。「 It只是用jQuery方式來做這件事的一種方式。 – CuSS 2010-04-14 13:35:41

-1

爲了優化性能，你應該在連接到幾個元素時使用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; 
});

來源

2010-04-14 11:55:33 Simeon

代碼太大-1 – CuSS 2010-04-14 11:59:35

對於什麼？我從來沒有說過這是最短的，我說這是最好的。 – Simeon 2010-04-14 12:09:43

我沒有標記爲-1，並閱讀了這個問題：「有什麼辦法可以將所有這些結合起來以減少JS的AMOUNT？」 – CuSS 2010-04-14 13:29:17

這是我的建議。指定一個普通DialogContent（說）類所有的div並使用它們初始化：

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

而且ofcourse使用Boldewyn的點擊事件的解決方案（最好是使用活的（）恕我直言，如果越來越動態生成的東西）。通過這種方式，您可以完成所有初始化操作，並以少量代碼點擊事件。

HTH

來源

2010-04-15 12:08:38 Raja

結合多個jQuery功能

回答

相關問題