Question

我有一些Javascript可以处理导航栏上的点击。在大多数情况下，它都适用于禁用样式，该样式应为上一个下一个，第一个和最后一个按钮，这些按钮会将您带到正确的页面。由于某些原因，应用于活动样式的相同技术无法正常工作。理想情况下，除了当前页面按钮之外，我永远不要让任何按钮显示为活动状态。无论我单击哪个按钮都将显示为活动样式，除非单击该页面，否则当前页面不会获得活动样式。对于在我的Navbar按钮上设置和取消激活的正确语法的任何帮助，将不胜感激。

var current_page;
var total_pages;

function fnPage_click(multiplyer) {
    //make all buttons inactive and enabled
    for (var i = 0; i < total_pages; i++)
        $('#li' + i).removeClass("active");

    $('#li.prev').removeClass("active");
    $('#li.prev').removeClass("disabled");
    $('#li.next').removeClass("active");
    $('#li.next').removeClass("disabled");
    $('#li.first').removeClass("active");
    $('#li.last').removeClass("active");

    $.ajax({
        url: '/Home/Browsing?' + multiplyer,
        type: 'POST',
        error: function (xhr) {
            alert('Error: ' + xhr.statusText);
        },
        success: function (result) {
            $("#divLocGrid").html(result);
            current_page = multiplyer;
            switch (current_page) {
                case 1: {
                    //Previous is disabled/inactive, First is inactive, the current_page is active
                    $("#li.prev").removeClass("active").addClass("disabled");
                    $("li.first").removeClass("active");
                    $('#li' + current_page).addClass("active");
                    break;
                }
                case total_pages: {
                    //Next is disabled/inactive, Last is inactive, the current_page is active
                    $('#li.next').removeClass("active").addClass("disabled");
                    $("li.last").removeClass("active");
                    $('#li' + current_page).addClass("active");
                    break;
                }
                default: {
                    //Previous and Next are enabled but inactive the current_page is active
                    $('#li.prev').removeClass("active");
                    $('#li.next').removeClass("active");
                    $('li' + current_page).addClass("active");
                    break;
                }
            }
        },
        async: true,
        processData: false
    });
}

function fnPrevNxt(strDir) {
    var multiplyer;

    if (strDir == 'Nxt') {
        multiplyer = current_page + 1;
        if (multiplyer > total_pages) {
            $('#li.next').removeClass("active").addClass("disabled");
            return;
        }

    }
    else {
        multiplyer = current_page - 1;
        if (multiplyer < 1) {
            $('#li.prev').removeClass("active").addClass("disabled");
            return;
        }
    }

    fnPage_click(multiplyer);
}

function fnOnNavBtnsLoad(model) {
    total_pages = model;
    fnPage_click(1);
}

<body onload="fnOnNavBtnsLoad(@Model)">
<div id="dvNavBtns">
    <nav class="navbar navbar-expand-lg bg-gray-light navbar-dark" aria-label="Locations pages">
        <ul id="ulNavBtns" class="pagination">
            <li id="li.first" class="page-item">
                <a href="javascript:void(0)" id="btnFirst" class="page-link" onclick="fnPage_click(1)">First</a>
            </li>
            <li id="li.prev" class="page-item">
                <a href="javascript:void(0)" id="btnPrev" aria-label="<<" class="page-link" onclick="fnPrevNxt('Prev')">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            @{int pages = Model;
                int num = 0;
                while (num < pages)
                {
                    num++;
                    <li id="li" +@(num) class="page-item">
                        <a href="javascript:void(0)" aria-label=@num class="page-link" onclick="fnPage_click(@(num))">
                            @(num)
                        </a>
                    </li>
                }
            }
            <li id="li.next" class="page-item">
                <a href="javascript:void(0)" id="btnNxt" aria-label=">>" class="page-link" onclick="fnPrevNxt('Nxt')">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <li id="li.last" class="page-item">
                <a href="javascript:void(0)" id="btnLast" class="page-link" onclick="fnPage_click(@Model)">Last</a>
            </li>
        </ul>
    </nav>
</div>

Answer 1

有点令人费解，但这是最终对我有用的语法。我必须遍历元素的document.context.all来找到该元素，然后从该元素的classList集合中添加或删除。

$(document).context.all['li.id'].classList.add("classname");
$(document).context.all['li.id'].classList.remove("classname");

在引导分页中设置和取消活动类

1 个答案: