简化jQuery函数

Simplifying a jQuery functions

本文关键字：函数 jQuery 简化      更新时间：2023-09-26

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

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

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

这有点好，但我想你不能获得显著的收益：

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

实现这一点的一种方法是迭代一个（或两个）字符串数组。

编辑：在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');
    });
}

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

有一个函数会更好一点：

$('.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，每次点击

执行多项操作
$('.my-profile, .userprofile, .cust-profile').click(function(){
    card_profile.load(url).dialog('open');
});

编辑：三思而后行——照埃尔蒂尔说的做。

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

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

在这里扔下另一顶帽子。。。

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

您可以在去调用者对象中保存一个参数，然后执行以下操作：

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

你可以在这里找到更多关于存储数据的信息，非常容易。

相关文章：