jQuery：使用触发器类附加加载的 url

Question

我正在使用 jQuery 通过 ajax 加载一个部分。我想做一个非常通用、紧凑的函数来根据点击的标签加载相应的部分。

这是棘手的部分。

我想获取单击的选项卡的类，并附加将与选项卡所具有的类一起加载的 url。 这是我目前所拥有的，我相信它可以做得更紧凑。

JS：

$.ajaxSetup ({
    cache: false
});
var ajax_load = "<img src='../../images/icons/loading.gif' alt='loading...' />";

var loadUrl = "/include/?section=accountsettings&view=";

$("#accountsettings").html(ajax_load).load(loadUrl + "accountsettings");

$(".filterCat a").click(function(){
    $("#contentSm div").fadeOut(200);
});

$(".accountsettings").click(function(){
    $("#accountsettings").html(ajax_load).load(loadUrl + "accountsettings");
    $("#accountsettings").delay(250).fadeIn(250);
});

$(".editprofile").click(function(){
    $("#editprofile").html(ajax_load).load(loadUrl + "editprofile");
    $("#editprofile").delay(250).fadeIn(250);
});

$(".notifications").click(function(){
    $("#notifications").html(ajax_load).load(loadUrl + "notifications");
    $("#notifications").delay(250).fadeIn(250);
});

$(".broadcast").click(function(){
    $("#broadcast").html(ajax_load).load(loadUrl + "broadcast");
    $("#broadcast").delay(250).fadeIn(250);
});

$(".import").click(function(){
    $("#import").html(ajax_load).load(loadUrl + "import");
    $("#import").delay(250).fadeIn(250);
});

HTML：

<div id="filter" class="span-3">
    <div id="accountSettingsTabs">
        <div class="filterCat section">
            <a class="accountsettings sel"><span class="wIcon accountSet"></span>Account</a>
            <a class="editprofile"><span class="wIcon send"></span>Edit Profile</a>
            <a class="notifications"><span class="wIcon emailNoti"></span>Notifications</a>
            <a class="broadcast"><span class="wIcon broadcast"></span>Broadcast</a>
            <a class="import"><span class="wIcon import"></span>Import</a>
        </div>
    </div>
</div>
<div id="contentSm" class="span-8">
    <div id="accountsettings" class="section"></div>
    <div id="editprofile" class="section"></div>
    <div id="notifications" class="section"></div>
    <div id="broadcast" class="section"></div>
    <div id="import" class="section"></div>
</div>

所以我希望将 /include/?section=accountsettings&view= 附加到单击锚的第一类。 我会尝试任何你能想到的！谢谢！

Answer 1

像这样创建标签

<a class="ajaxifiedTab notifications" _param="notifications" />

Javascript

var loadUrl = "/include/?section=accountsettings&view=";
jQuery(function(){
   jQuery('.ajaxifiedTab').bind('click',function(e){    
       e.preventDefault();
       var _class=jQuery(e.target).attr('_param');
       jQuery.ajax({
            url:loadUrl +_class,
            type:'get',  //or post as u think
            success:function(data){
                jQuery('#'+_class).html(data);
            }
        });
   });
});