簡化了jQuery函數

我想簡化這個腳本的方法，因爲不知何故我一遍重複自己......簡化了jQuery函數

$('.userprofile').click(function(){ 
    card_profile.load(url_settings).dialog('open'); 
}); 
$('.cust-profile').click(function(){ 
    card_profile.load(url_customer).dialog('open'); 
}); 
$('.my-profile').click(function(){ 
    card_profile.load(url_my).dialog('open'); 
});

來源

2013-07-25 rolodex

請與鍵/值對映射類名到'url_'值的對象，然後枚舉對象，使用選擇的關鍵和'.load（）'參數的值。這假設網址不會改變。如果他們這樣做，你需要在對象中更新它們。 –

...另一種選擇是將相同的處理程序綁定到所有的類，然後使用'.hasClass（）'來選擇使用哪個'url_'。 –

使用'.hasClass（）'？你能告訴我一個例子嗎？對不起，麻煩你了，但我在這個領域有點新... – rolodex

var obj = { 
    '.userprofile' : url_settings, 
    '.cust-profile': url_customer, 
    '.my-profile' : url_my 
}; 

$.each(obj, function(sel, url) { 
    $(sel).click(function(){ 
     card_profile.load(url).dialog('open'); 
    }); 
});

或

$(".userprofile,.cust-profile,.my-profile").click(function() { 
    var url = $(this).hasClass("userprofile") ? url_settings : 
       $(this).hasClass("cust-profile") ? url_customer : 
               url_my; 
    card_profile.load(url).dialog("open"); 
});

來源

2013-07-25 17:09:05

我更喜歡第一個。無論如何，每個人都非常感謝。感謝您抽出時間！很高興有你們在這裏。 – rolodex

$('.my-profile, .userprofile, .cust-profile').click(function(){ 
    card_profile.load(url).dialog('open'); 
});

編輯：於第二個想法 - 做Eltier說什麼。

來源

2013-07-25 17:01:01 fred2

你對所有元素使用相同的'url'。 –

每個類加載不同的URL ... – rolodex

做什麼@eltiar說。我只是簡化了選擇器。 – fred2

這樣做的一種方法是迭代一個數組（或兩個）字符串。

編輯：宣佈i外面的for循環從@crazytrain

arr = ['user', 'cust', 'my']; 
url_arr = [urlA, urlB, urlC]; 
var i; 
for (i in arr){ 
    $('.' + arr[i] + '-profile').click(function(){ 
     card_profile.load(url_arr[i]).dialog('open'); 
    }); 
}

來源

2013-07-25 17:04:24 lando

這將不起作用，因爲'i'的循環值不會保留在處理程序中。 *（JavaScript沒有塊範圍）* –

如果你在循環之外聲明'i'（'var i;'），它應該可以正常工作，不是嗎？ – lando

不，循環會在每次迭代時更新'i'，但循環中的當前值不會在'click'處理程序中捕獲。處理程序在封閉變量作用域上創建一個閉包，這意味着當點擊發生時它將讀取當前的值'i'。該值將在循環結束後留下的任何位置。 –

這在某種程度上更好地解決意見，但你不能得到顯著增益我想：

$('.userprofile').data('url',url_settings); 
$('.cust-profile').data('url',url_customer); 
$('.my-profile').data('url',url_my); 
$('.userprofile, .cust-profile, .my-profile').click(function(){ 
    card_profile.load($(this).data('url')).dialog('open'); 
});

如果您分配給每個按鈕的URL，那麼你不必重複類：

$('button').click(function(){ 
    card_profile.load($(this).data('url')).dialog('open'); 
});

來源

2013-07-25 17:05:05

我最喜歡這個解決方案。如果可能，請在提供頁面時附加作爲數據屬性所需的所有信息，然後使用通用函數使用元素的數據屬性執行給定函數。 – Zhihao

$(document).on('click', function(e){ 
    if($(e.target).hasClass('userprofile')){ 
    card_profile.load(url_settings).dialog('open'); 
    } 
    if($(e.target).hasClass('cust-profile')){ 
    card_profile.load(url_costumer).dialog('open'); 
    } 
    if($(e.target).hasClass('myprofile')){ 
    card_profile.load(url_my).dialog('open'); 
    }

來源

2013-07-25 17:05:58 steo

這是有功能的更好一點：

$('.userprofile').click(function(){ 
    loadDiag(url_settings); 
}); 
$('.cust-profile').click(function(){ 
    loadDiag(url_customer); 
}); 
$('.my-profile').click(function(){ 
    loadDiag(url_my); 
}); 

function loadDiag(url){ 
    card_profile.load(url).dialog('open'); 
}

你也可以switch通過參數和做每點擊

來源

2013-07-25 17:07:12 DACrosby

多的東西分配一個URL屬性給每個元素。然後，您可以通過這種方式檢索該值並在代碼中使用。

$('.userprofile').attr('url',url_settings); 
$('.cust-profile').attr('url',url_customer); 
$('.my-profile').attr('url',url_my); 
$('.my-profile, .userprofile, .cust-profile').click(function(){ 
    var url = $(this).attr('url'); 
    card_profile.load(url).dialog('open'); 
});

來源

2013-07-25 17:07:47

你可以使用HTML數據屬性，並把它簡單的這樣

$('.userprofile, .cust-profile, .my-profile').click(function(){ 
    var url = $(this).attr('data-url'); 
    card_profile.load(url).dialog('open'); 
}); 

<div class="userprofile" data-url="settings.php">Settings</div>

，並使其更好，你可以添加一個類的所有負荷的項目，如本

$('.load-box').click(function(){ 
    var url = $(this).attr('data-url'); 
    card_profile.load(url).dialog('open'); 
}); 

<div class="userprofile load-box" data-url="settings.php">Settings</div>

來源

2013-07-25 17:08:43 iConnor

您可以保存在德主叫對象的參數，然後做這樣的事情：

$('.userprofile, .cust-profile, .my-profile').on('click',function(){ 
    var parameter = $(this).data('parameter'); 
    card_profile.load(parameter).dialog('open'); 
});

您可以找到有關存儲數據here更多信息，非常方便。

來源

2013-07-25 17:09:15

參數來自哪裏？ –

正如我所說的，你可以使用.data（）保存一個參數在調用者對象中，如果是一個錨點，你可以使用url，或者你可以在de html中使用de參數，如下所示：

。 –

這只是令人困惑。你傳遞'parameter'變量的值，它將是'undefined'。也許你的意思是'.data（「parameter」）' –

在這裏圈投擲另一頂帽子...

var links = [{profile: '.userprofile', url: url_settings, clickDialog: 'open'}, 
      {profile: '.cust-profile', url: url_customer, clickDialog: 'open'}, 
      {profile: '.my-profile', url: url_my, clickDialog: 'open'}]; 

function clickOpen(url,value) { 
    card_profile.load(url).dialog(value); 
} 

links.forEach(function(element) { $(element.profile).click(
clickOpen(element.url,element.clickDialog) });

來源

2013-07-25 17:43:37

簡化了jQuery函數

回答

相關問題