Question

我有点不知道为什么这些功能不一样。简而言之，我有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);
            })
        );
    });

令我感到困惑的是，前六个功能是否正常工作，而底部功能没有（数据未显示在页面上的div中），而且我已倾倒它，似乎“应该”工作，所以我必须在这里找到一些基本的ajax进程。

对此提出任何建议。

谢谢！

Answer 1

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

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

您在document元素上注册事件监听器，并且告诉jQuery如果点击发生在"#hwTab1, ...上，它应该只调用eventhandler。 this始终对注册事件处理程序的元素进行引用，这是document元素，因为您始终与id的{{1}}相同。 }。

您需要改为使用事件目标：

document

Ajax函数用于多个id，减少冗余

1 个答案: