时间戳

首页 > 解决方案 > 多个id的Ajax函数，减少冗余

jquery - 多个id的Ajax函数，减少冗余

问题描述

我有点困惑为什么这些功能不一样。简而言之，我有 6 个选项卡（每个都有唯一的 id），每个选项卡都执行基本相同的 ajax 调用（将数据显示到选项卡中的 div 中）。我目前将它们写成 6 个不同的 ajax 函数。

作为单独的功能，它们按预期工作。但是，如果我尝试创建一个通用函数并将其附加到 6 个 id 上，它就不起作用。

以下是按预期工作的六个功能。

    $("#hwTab1").click(function () {
        $("#hwTab1Tab, #hwTab2Tab, #hwTab3Tab, #hwTab4Tab, #hwTab5Tab, #hwTab6Tab").hide();
        $('#hwTab1Tab').show();
        $.when(
            $.get('/api/sitecore/HwTabsWrapper/HwTabsWrapperCtrl?Tab=HwTab1&pv=/Views/Components/_HwTabsWrapperCtrl.cshtml', function (data3) {
                $('#hwTab1Content').html(data3);
            })
        );
    });

    $("#hwTab2").click(function () {
        $("#hwTab1Tab, #hwTab2Tab, #hwTab3Tab, #hwTab4Tab, #hwTab5Tab, #hwTab6Tab").hide();
        $('#hwTab2Tab').show();
        $.when(
            $.get('/api/sitecore/HwTabsWrapper/HwTabsWrapperCtrl?Tab=HwTab2&pv=/Views/Components/_HwTabsWrapperCtrl.cshtml', function (data) {
                $('#hwTab2Content').html(data);
            })
        );
    });

    $("#hwTab3").click(function () {
        $("#hwTab1Tab, #hwTab2Tab, #hwTab3Tab, #hwTab4Tab, #hwTab5Tab, #hwTab6Tab").hide();
        $('#hwTab3Tab').show();
        $.when(
            $.get('/api/sitecore/HwTabsWrapper/HwTabsWrapperCtrl?Tab=HwTab3&pv=/Views/Components/_HwTabsWrapperCtrl.cshtml', function (data3) {
                $('#hwTab3Content').html(data3);
            })
        );
    });

    $("#hwTab4").click(function () {
        $("#hwTab1Tab, #hwTab2Tab, #hwTab3Tab, #hwTab4Tab, #hwTab5Tab, #hwTab6Tab").hide();
        $('#hwTab4Tab').show();
        $.when(
            $.get('/api/sitecore/HwTabsWrapper/HwTabsWrapperCtrl?Tab=HwTab4&pv=/Views/Components/_HwTabsWrapperCtrl.cshtml', function (data3) {
                $('#hwTab4Content').html(data3);
            })
        );
    });

    $("#hwTab5").click(function () {
        $("#hwTab1Tab, #hwTab2Tab, #hwTab3Tab, #hwTab4Tab, #hwTab5Tab, #hwTab6Tab").hide();
        $('#hwTab5Tab').show();
        $.when(
            $.get('/api/sitecore/HwTabsWrapper/HwTabsWrapperCtrl?Tab=HwTab5&pv=/Views/Components/_HwTabsWrapperCtrl.cshtml', function (data3) {
                $('#hwTab5Content').html(data3);
            })
        );
    });

    $("#hwTab6").click(function () {
        $("#hwTab1Tab, #hwTab2Tab, #hwTab3Tab, #hwTab4Tab, #hwTab5Tab, #hwTab6Tab").hide();
        $('#hwTab6Tab').show();
        $.when(
            $.get('/api/sitecore/HwTabsWrapper/HwTabsWrapperCtrl?Tab=HwTab6&pv=/Views/Components/_HwTabsWrapperCtrl.cshtml', function (data3) {
                $('#hwTab6Content').html(data3);
            })
        );
    });

如您所见，代码中有很多冗余。所以这是我尝试做一个可重用的功能。

    $(document).on("click", "#hwTab1, #hwTab2, #hwTab3, #hwTab4, #hwTab5, #hwTab6", function () {
        $("#hwTab1Tab, #hwTab2Tab, #hwTab3Tab, #hwTab4Tab, #hwTab5Tab, #hwTab6Tab").hide();
        var linkIDtmp = $(this).attr('id');
        var linkTmp = "#" + linkIDtmp + "Tab";
        $(linkTmp).show();

        var divTmp = '#' + linkIDtmp + 'content';
        $.when(
            $.get('/api/sitecore/HwTabsWrapper/HwTabsWrapperCtrl?Tab=HwTab2&pv=/Views/Components/_HwTabsWrapperCtrl.cshtml', function (data) {
                $(divTmp).html(data);
            })
        );
    });

让我感到困惑的是，前 6 个功能有效，而底部功能无效（数据未显示在页面上的 div 中），我已经倾注了它，似乎它“应该”有效，所以有一定是我在这里缺少的一些基本的ajax进程。

感谢您对此的任何建议。

谢谢！

标签： jqueryajaxfunction

解决方案

在您的第二个示例中，您使用事件委托：

$(document).on("click", "#hwTab1,

您在元素上注册事件侦听器，document并告诉 jQuery 它应该只在单击发生时才调用事件处理程序"#hwTab1, ...。this总是引用事件处理程序在其上注册的元素，这就是元素document，因为你总是id对document.

您需要改用事件目标：

$(document).on("click", "#hwTab1, #hwTab2, #hwTab3, #hwTab4, #hwTab5, #hwTab6", 
  function (evt) { // add the event parameter here
    $("#hwTab1Tab, #hwTab2Tab, #hwTab3Tab, #hwTab4Tab, #hwTab5Tab, #hwTab6Tab").hide();
    var linkIDtmp = $(evt.target).attr('id'); // use evt.target instead of this
    var linkTmp = "#" + linkIDtmp + "Tab";
    $(linkTmp).show();

    var divTmp = '#' + linkIDtmp + 'Content';
    var tabName = linkIDtmp[0].charAt(0).toUpperCase() + linkIDtmp[0].substr(1,mode.length)       

    $.get('/api/sitecore/HwTabsWrapper/HwTabsWrapperCtrl?Tab=' + tabName + 
            '&pv=/Views/Components/_HwTabsWrapperCtrl.cshtml', 
    function (data) {
       $(divTmp).html(data);
    })
});

推荐阅读