Question

我想知道简化这个脚本的方法，因为我不知怎的重复了一遍......

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

Answer 1

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");
});

Answer 2

执行此操作的一种方法是迭代一个（或两个）字符串数组。

编辑：在for循环之外声明i以解决来自@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');
    });
}

Answer 3

这稍微好一点，但我猜你不会获得显着的收益：

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

如果您为每个按钮指定了网址，那么您就不必重复这些课程：

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

Answer 4

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

编辑：第二个想法 - 做Eltier所说的。

Answer 5

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

Answer 6

功能更好一点：

$('.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通过参数，每次点击做多件事

Answer 7

为每个元素分配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');
});

Answer 8

你可以使用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>

Answer 9

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

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

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

Answer 10

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

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) });

简化jQuery函数

10 个答案: