使用 JavaScript 在 prev next 按钮之间插入文本答案

【问题标题】：Inserting text between prev next buttons using JavaScript使用 JavaScript 在 prev next 按钮之间插入文本
【发布时间】：2022-10-01 01:14:11
【问题描述】：

我有以下脚本，并且上一个和下一个按钮的功能可以完美运行。但是，我收到了在按钮之间插入日期的请求，使其看起来像这样：

btnPrev issueDate btnNext <日期>

这是我到目前为止的代码。我在 PREV 和 NEXT 按钮之间添加了以下内容，但它没有在页面上呈现。如何在这两个按钮之间插入文本？

            type: \"span\",
            textContent: \"November 1, 2022\",
            ...this.btnIssue,
        });

这是整个脚本：

    constructor(selector, options = {}) {
        Object.assign(
            this, {
                EL: document.querySelector(selector),
                page: 0,
                selector,
                // btnTabs: {}, // Custom attributes for tabs (navigation) buttons
                btnPrev: {}, // Custom attributes for PREV button
                btnNext: {}, // Custom attributes for NEXT button
                classActive: \"is-active\",
                onChange: () => {},
            },
            options
        );
        this.EL_pages = this.EL.children;
        this.EL_pagination = document.querySelectorAll(`[data-tabs-pagination=\"${this.selector}\"]`);
        this.EL_navigation = document.querySelectorAll(`[data-tabs-navigation=\"${this.selector}\"]`);
        this.total = this.EL_pages.length;
        this.EL_prev = this._ELNew(\"button\", {
            type: \"button\",
            textContent: \"<\",
            onclick: () => this.prev(),
            ...this.btnPrev,
        });
        this.EL_issue = this._ELNew(\"span\", {
            type: \"span\",
            textContent: \"November 1, 2022\",
        });
        this.EL_next = this._ELNew(\"button\", {
            type: \"button\",
            textContent: \">\",
            onclick: () => this.next(),
            ...this.btnNext,
        });
        this.EL_buttons = Array.from(Array(this.total)).reduce((arr, _, i) => {
            const EL_btn = this._ELNew(\"button\", {
                type: \"button\",
                textContent: i + 1,
                onclick: () => (this._page = i),
                ...this.btnPagination,
            });
            arr.push(EL_btn);
            return arr;
        }, []);
        this._init();
    }

    // Utility function - New element
    _ELNew = (sel, attr) => Object.assign(document.createElement(sel), attr || {});

    // Fix negative modulo index 
    _mod = (n) => ((n % this.total) + this.total) % this.total;

    // Initialize
    _init() {
        // Append nav buttons to DOM
        this.EL_pagination.forEach((EL) => EL.append(...this.EL_buttons));
        this.EL_navigation.forEach((EL) => EL.append(this.EL_prev, this.EL_next));

        // Set current page
        this._page = this.page;
    }

    prev(n = 1) {
        this._page -= n;
        return this;
    }

    next(n = 1) {
        this._page += n;
        return this;
    }

    show(idx) {
        this._page = idx;
        return this;
    }

    set _page(n) {
        this.page = this._mod(n);
        [...this.EL_pages, ...this.EL_buttons].forEach((EL) => EL.classList.remove(this.classActive));
        [this.EL_pages[this.page], this.EL_buttons[this.page]].forEach((EL) => EL.classList.add(this.classActive));
        // Provide a callback
        this.onChange.call(this);
    }

    get _page() {
        return this.page;
    }
}


// Use like:
const mySectionTabs = new Tabs(\"#issue-nav\", {
    onChange() {
        console.clear();
        console.log(`Current page index: ${this.page}`);
    }
});

您已提出要求，但没有实际问题。你试过什么？
@ScottMarcus - 我在原帖中添加了更多细节。
在 _init 中查看它附加 this.EL_prev、this.EL_next 的位置？我猜你想把 this.EL_issue （或任何包含日期的元素）放在它们之间。
@James - 我刚刚注意到并更新了它......在看到你的评论之前，但感谢你的评论。

标签： javascript html jquery css

【解决方案1】：

我无意中遗漏了“this.EL_issue”，现在已经更新了。

this.EL_navigation.forEach((EL) =&gt; EL.append(this.EL_prev, this.EL_issue, this.EL_next));

【讨论】：