javascript - jquery 褪色问题

Question

我是 jquery 的新手，我试图在单击页码时淡入/淡出画廊的页面。页码也应淡入不同的颜色，边框应淡入/淡出。

我有两个问题。在 localhost 和 jsfiddle 上，图像的淡入/淡出有效，但在现场直播时，首次更改图库页面时会出现问题。新页面没有淡入，而是看起来根本没有动画。第一次点击后它工作正常。这可以在这里看到(正如我提到的，这不会发生在 jsfiddle 中):https://intellidesign.000webhostapp.com/gallery.html

代码在这里，但我还在下面粘贴了 jquery:https://jsfiddle.net/adamjroberts91/xpvt214o/524699/

页码周围的边框也有一些问题。当在图库中单击每个数字时，它应该从当前数字中删除一个类并将其添加到被单击的类中，但这似乎没有发生。唯一一次更改任何类(class)是在单击返回第 1 页时 - 类(class)从编号 1 中删除但未重新添加。

代码(第 3 页可能看起来没有加载，但它当前的图像与第 2 页相同):

// Add the class names for each gallery to variables
const pageOne = '.gallery__page-1';
const pageTwo = '.gallery__page-2';
const pageThree = '.gallery__page-2';

//Add the class names for pagination numbers to variables
const pageNumberOne = '.gallery__pagination-number-1';
const pageNumberTwo = '.gallery__pagination-number-2';
const pageNumberThree    = '.gallery__pagination-number-3';

//Set the selected page and pagination to page 1
let currentPage = pageOne;
let currentPageNumber = pageNumberOne;

//Fade out the current page and fade in the new one
//Change color/outline of pagination numbers to show page selected
$(document).ready(() => {
    $(pageTwo).hide();
    $(pageThree).hide();
    $(pageNumberOne).click(() => {
        $(currentPage).fadeOut('slow', () => {
            $(pageOne).fadeIn('slow');
        });
        currentPage = pageOne;
        setTimeout(() => {
            $(pageNumberOne).addClass('gallery__pagination-number-selected');
            $(currentPageNumber).removeClass('gallery__pagination-number-selected');
        }, 500);
        currentPageNumber = pageNumberOne;
    });
    $(pageNumberTwo).click(() => {
        $(currentPage).fadeOut('slow', () => {
            $(pageTwo).fadeIn('slow');
        });
        currentPage = pageTwo;
        setTimeout(() => {
            $(pageNumberTwo).addClass('gallery__pagination-number-selected');
            $(currentPageNumber).removeClass('gallery__pagination-number-selected');
        }, 500);
        currentPageNumber = pageNumberTwo;
    });
    $(pageNumberThree).click(() => {
        $(currentPage).fadeOut('slow', () => {
            $(pageThree).fadeIn('slow');
        });
        currentPage = pageThree;
        setTimeout(() => {
            $(pageNumberThree).addClass('gallery__pagination-number-selected');
            $(currentPageNumber).removeClass('gallery__pagination-number-selected');
        }, 500);
        currentPageNumber = pageNumberThree;
    });
});

Answer 1

我知道这里有很多答案，但有很多问题，所以我将在这里逐步解决一些问题，我可以根据需要更新我的答案。

无需在 css 中重复您的样式。类的要点是您可以在多个元素上使用相同的类。只需使用像 .gallery-page 这样的类，而不是复制 .gallery__page-1、.gallery__page- 等的样式规则。

图片太大。您的某些图片超过 20mb；加载这一页所服务的所有 140mb 需要 52 秒。您可以减小图像大小/质量设置，但仍能提供一组好看的图像。

无需存储 jQuery 选择器字符串，然后重复调用 jQuery 函数来访问该元素。

//bad
var thing = '.thing';
// later on calling this repeatedly
$(thing).addClass(...

// better
var thing = $( '.thing' );
// later on calling this repeatedly
thing.addClass(...

您的按钮类不起作用，因为超时在安排超时时不使用上下文，它在调用函数时使用上下文。上下文是指变量值的状态。具体来说，在您的 js 中，currentPageNumber 设置为超时函数将选择添加 selected 类并将其从中删除的类。如果该变量在超时函数内更新，它会更像您预期的那样工作，但 id 只是使用带有延迟的 css 转换而不是 js 超时。

您不需要将当前页面存储在 javascript 的变量中。只需将 .current 或 .active 之类的类附加到 dom 中的事件元素。当您对点击使用react时，您可以淡出所有页面，解析被点击链接的 id 以获取页码，然后淡入新的当前页面。这将修复您的 js 错误并使您的代码在添加更多页面时可重用。

我认为淡入不起作用，因为 jQuery 在渲染之前不知道它正在淡入的元素的大小。您可以尝试向页面添加高度，看看是否能解决淡入淡出问题。