如何在 JavaScript 中创建 previous/next 按钮？（试过了，但有些东西不起作用）

Question

所以这是我的 HTML 部分：

   class Customer {
        constructor(picture, name, position, review){
            this._picture = picture;
            this._name = name;
            this._position = position;
            this._review = review;
        }
    
        get picture() {
            return this._picture;
        }
    
        get name() {
            return this._name;
        }
    
        get position() {
            return this._position;
        }
    
        get review() {
            return this._review;
        }
    }
    
    const customerBarbara = new Customer('barbara.jpg', 'Barbara', 'Assistant Manager', 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, porro facilis quos doloribus molestias eaque!');
    const customerPerry = new Customer('perry.jpg', 'Perry', 'Programmer', 'Repellendus non ratione id eveniet quisquam omnis itaque explicabo nihil, inventore rerum nisi, atque ex sequi!');
    const customerClarence = new Customer('clarence.jpg', 'Clarence', 'Web Master', 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur fuga laboriosam officia facilis voluptas? Repellendus non ratione id eveniet quisquam omnis itaque explicabo nihil, inventore rerum nisi, atque ex sequi!');
    const customerSara = new Customer('sara.jpg', 'Sara', 'Physician', 'Enim beatae provident voluptates accusantium expedita, maxime minima fugiat consectetur fuga. Tempora id error eos quae iusto saepe. Eius expedita et animi veniam minus officiis. Ea eligendi maxime corporis in tempore, dolore culpa accusamus repellat ullam? Harum.');
    const customerTom = new Customer('tom.jpg', 'Tom', 'Cleaner', 'Tempora id error eos quae iusto saepe. Eius expedita et animi veniam minus officiis. Ea eligendi maxime corporis in tempore, dolore culpa accusamus repellat ullam? Harum.')
    
    const arrayOfCustomers = [customerBarbara, customerClarence, customerPerry, customerSara, customerTom];
    
    let customersName, customersPic, customersPosition, customersReview;
    let i = 0;
    
    
    const randomReview = () => {
        const randomCustomer = Math.floor(Math.random() * arrayOfCustomers.length);
        customersName = arrayOfCustomers[randomCustomer].name;
        customersPic = arrayOfCustomers[randomCustomer].picture;
        customersPosition = arrayOfCustomers[randomCustomer].position;
        customersReview = arrayOfCustomers[randomCustomer].review;
    
        clientName.innerHTML = customersName;
        clientPosition.innerHTML = customersPosition;
        clientReview.innerHTML = `" ${customersReview} "`;
    }
    
    const nextReview = () => {
        if(i === arrayOfCustomers.length){
            i = 0;
        } else {
            i++;
        }
    
        customersName = arrayOfCustomers[i].name;
        customersPic = arrayOfCustomers[i].picture;
        customersPosition = arrayOfCustomers[i].position;
        customersReview = arrayOfCustomers[i].review;
    
        clientName.innerHTML = customersName;
        clientPosition.innerHTML = customersPosition;
        clientReview.innerHTML = `" ${customersReview} "`;
    }
    
    const previousReview = () => {
        if(i === 0){
            i = arrayOfCustomers.length - 1;
        } else {
            i--;
        }
    
        customersName = arrayOfCustomers[i].name;
        customersPic = arrayOfCustomers[i].picture;
        customersPosition = arrayOfCustomers[i].position;
        customersReview = arrayOfCustomers[i].review;
    
        clientName.innerHTML = customersName;
        clientPosition.innerHTML = customersPosition;
        clientReview.innerHTML = `" ${customersReview} "`;
    }
    
    clientName.innerHTML = arrayOfCustomers[i].name;
    clientPosition.innerHTML = arrayOfCustomers[i].position;
    clientReview.innerHTML = arrayOfCustomers[i].review;
    
    generateRandomReview.addEventListener('click', randomReview);
    showNextReview.addEventListener('click', nextReview);
    showPreviousReview.addEventListener('click', previousReview);

 <body>
        <main>
            <h2>Our Reviews</h2>
            <section>
                <img id="clientPic" src="" alt="">
                <h6 id="clientName"></h6>
                <p id="clientPosition"></p>
                <article id="clientReview"></article>
                <a href="" id="showPreviousReview"> < </a> <a href="" id="showNextReview"> > </a>
                <button id="generateRandomReview">Surprise Me</button>
            </section>
        </main>
    </body>

所以我的问题是 randomReview 功能正常工作，它在网站上显示随机的东西，但 nextReview 和 previousReview 功能不固定。我的意思是，当我点击箭头标签时，我看到一切都出现了半秒钟，一切似乎都在正确的位置，但随后它就消失了，我似乎不明白为什么..

感谢您的宝贵时间！

Answer 1

您需要通过在回调中使用 e.preventDefault() 来阻止 <a> 点击的默认操作：

class Customer {
        constructor(picture, name, position, review){
            this._picture = picture;
            this._name = name;
            this._position = position;
            this._review = review;
        }
    
        get picture() {
            return this._picture;
        }
    
        get name() {
            return this._name;
        }
    
        get position() {
            return this._position;
        }
    
        get review() {
            return this._review;
        }
    }
    
    const customerBarbara = new Customer('barbara.jpg', 'Barbara', 'Assistant Manager', 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, porro facilis quos doloribus molestias eaque!');
    const customerPerry = new Customer('perry.jpg', 'Perry', 'Programmer', 'Repellendus non ratione id eveniet quisquam omnis itaque explicabo nihil, inventore rerum nisi, atque ex sequi!');
    const customerClarence = new Customer('clarence.jpg', 'Clarence', 'Web Master', 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur fuga laboriosam officia facilis voluptas? Repellendus non ratione id eveniet quisquam omnis itaque explicabo nihil, inventore rerum nisi, atque ex sequi!');
    const customerSara = new Customer('sara.jpg', 'Sara', 'Physician', 'Enim beatae provident voluptates accusantium expedita, maxime minima fugiat consectetur fuga. Tempora id error eos quae iusto saepe. Eius expedita et animi veniam minus officiis. Ea eligendi maxime corporis in tempore, dolore culpa accusamus repellat ullam? Harum.');
    const customerTom = new Customer('tom.jpg', 'Tom', 'Cleaner', 'Tempora id error eos quae iusto saepe. Eius expedita et animi veniam minus officiis. Ea eligendi maxime corporis in tempore, dolore culpa accusamus repellat ullam? Harum.')
    
    const arrayOfCustomers = [customerBarbara, customerClarence, customerPerry, customerSara, customerTom];
    
    let customersName, customersPic, customersPosition, customersReview;
    let i = 0;
    
    
    const randomReview = () => {
        const randomCustomer = Math.floor(Math.random() * arrayOfCustomers.length);
        customersName = arrayOfCustomers[randomCustomer].name;
        customersPic = arrayOfCustomers[randomCustomer].picture;
        customersPosition = arrayOfCustomers[randomCustomer].position;
        customersReview = arrayOfCustomers[randomCustomer].review;
    
        clientName.innerHTML = customersName;
        clientPosition.innerHTML = customersPosition;
        clientReview.innerHTML = `" ${customersReview} "`;
    }
    
    const nextReview = () => {
        e.preventDefault();
        if(i === arrayOfCustomers.length){
            i = 0;
        } else {
            i++;
        }
    
        customersName = arrayOfCustomers[i].name;
        customersPic = arrayOfCustomers[i].picture;
        customersPosition = arrayOfCustomers[i].position;
        customersReview = arrayOfCustomers[i].review;
    
        clientName.innerHTML = customersName;
        clientPosition.innerHTML = customersPosition;
        clientReview.innerHTML = `" ${customersReview} "`;
    }
    
    const previousReview = (e) => {
        e.preventDefault();
        if(i === 0){
            i = arrayOfCustomers.length - 1;
        } else {
            i--;
        }
    
        customersName = arrayOfCustomers[i].name;
        customersPic = arrayOfCustomers[i].picture;
        customersPosition = arrayOfCustomers[i].position;
        customersReview = arrayOfCustomers[i].review;
    
        clientName.innerHTML = customersName;
        clientPosition.innerHTML = customersPosition;
        clientReview.innerHTML = `" ${customersReview} "`;
    }
    
    clientName.innerHTML = arrayOfCustomers[i].name;
    clientPosition.innerHTML = arrayOfCustomers[i].position;
    clientReview.innerHTML = arrayOfCustomers[i].review;
    
    generateRandomReview.addEventListener('click', randomReview);
    showNextReview.addEventListener('click', nextReview);
    showPreviousReview.addEventListener('click', previousReview);

<body>
        <main>
            <h2>Our Reviews</h2>
            <section>
                <img id="clientPic" src="" alt="">
                <h6 id="clientName"></h6>
                <p id="clientPosition"></p>
                <article id="clientReview"></article>
                <a href="" id="showPreviousReview"> < </a> <a href="" id="showNextReview"> > </a>
                <button id="generateRandomReview">Surprise Me</button>
            </section>
        </main>
    </body>

如何在 JavaScript 中创建 previous/next 按钮？（试过了，但有些东西不起作用）

How do I create previous/next button in JavaScript? (Tried it but something doesn't work)

javascript

oop

web

如何在 JavaScript 中创建 previous/next 按钮？ （试过了，但有些东西不起作用）

How do I create previous/next button in JavaScript? (Tried it but something doesn't work)

javascript

oop

web

如何在 JavaScript 中创建 previous/next 按钮？（试过了，但有些东西不起作用）