0

我想知道简化这个脚本的方法，因为不知何故我一遍又一遍地重复自己......

$('.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');
});
4

10 回答 10

2 
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-25T17:09:05.050 回答
1

一种方法是迭代一个（或两个）字符串数组。

编辑：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-25T17:04:24.780 回答
1

这有点好，但我猜你无法获得显着收益：

$('.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-25T17:05:05.840 回答
0 
$('.my-profile, .userprofile, .cust-profile').click(function(){
    card_profile.load(url).dialog('open');
});

编辑：再三考虑 - 做 Eltier 所说的。

于 2013-07-25T17:01:01.617 回答
0 
$(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-25T17:05:58.397 回答
0

有一个功能会好一点：

$('.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-25T17:07:12.260 回答
0

为每个元素分配一个 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-25T17:07:47.940 回答
0

您可以使用 html data 属性并像这样简单

$('.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-25T17:08:43.123 回答
0

您可以将参数保存在 de caller 对象中，然后执行以下操作：

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

您可以在此处找到有关存储数据的更多信息，非常简单。

于 2013-07-25T17:09:15.993 回答
0

在这里扔另一顶帽子...

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-25T17:43:37.163 回答