如何重用图库中的特定功能到博客以在所有 post 的图库视图和幻灯片视图中的特定 post 之间切换

Question

我很高兴向 Stack Overflow 的编码英雄寻求帮助。

我正在尝试复制 Javascript 函数。我之前已经使用它在单个网页上显示在幻灯片图片视图中的图库缩略图视图中单击的元素。它运行良好，感谢您的帮助。您可以在此处看到 post：

现在，我正在尝试编写一个类似的函数来显示，同样在单个网页上，博客-post 在幻灯片放映-普通视图中的画廊-缩略图视图中被点击。我写了一个与第一个功能相同的功能，只是我在各处重命名它以免与第一个冲突，该功能在网站的画廊页面上使用。我检查并重新检查了名称，但尽管具有相同的功能，以相同的方式使用，但它仍然无法正常工作。

我的目标博客风格是类似砖石结构的博客，Magtastico 主题就是一个很好的例子，但一切都发生在一个页面上：

http://preview.themeforest.net/item/magtastico-responsive-masonry-blog-wordpress-theme/full_screen_preview/7569502?clickthrough_id=1224073649&redirect_back=true&ref=cirvitis

我修改了一些其他功能，并尝试了名称和事件的变体，但问题仍然存在，只有一个 Divs 显示，每次都显示相同的，无论是哪个缩略图-post 我点击。在画廊页面上应用时，相同的 Javascript 对 select 我点击的特定页面起作用，然后在幻灯片视图中显示。

通常情况下，我会在几天内单独调试它，但该项目已接近截止日期，因此非常感谢任何帮助。

下面是我写的相关HTML、CSS、Javascript：

HTML，里面有 onclick 触发器：

<div class="post" id="post">
    <div class="posts">


        <div class="post__slide">
              <img class="post__picture" onclick="blog__allDivs()" src="img/Picture1.jpg" alt="The Land Before Birth">
            <div class="post__content">
              <title class="post__title" onclick="blog__allDivs()">The Land Before Birth </title>
              <div class="post__text">
                  <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
              </div>
            </div>
        </div>


        <div class="post__slide" onclick="blog__allDivs()">
              <img class="post__picture" src="img/Picture2.jpg" alt="The Pearl In The Cosmic Shell">
            <div class="post__content">
              <title class="post__title">The Pearl In The Cosmic Shell</title>
              <div class="post__text">
                    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
              </div>
            </div>
        </div>


        <div class="post__slide">
              <img class="post__picture" onclick="blog__allDivs()" src="img/Picture3.jpg" alt="The Muse">
            <div class="post__content">
              <title class="post__title">The Muse</title>
              <div class="post__text">
                  <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
              </div>
            </div>
        </div>


    </div>
</div>




<div class="blog is-visible" id="blog">


  <div class="blog__row">

      <div class="blog__post">
          <div class="blog__picture" onclick="blog__showDivFix(+1);">
            <img class="blog__thumbnail" src="img/Picture1.jpg" alt="The Land Before Birth">
          </div>
          <div class="blog__content">
            <h2 class="blog__title" onclick="blog__showDivFix(+1);">The Land Before Birth</h2>
            <p class="blog__text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...</p>
            <button class="blog__button" onclick="blog__showDivFix(+1);">Read More</button>
          </div>
      </div>

      <div class="blog__post">
          <div class="blog__picture" onclick="blog__showDivFix(+2);">
            <img class="blog__thumbnail" src="img/Picture2.jpg" alt="The Pearl In The Cosmic Shell">
          </div>
          <div class="blog__content">
            <h2 class="blog__title" onclick="blog__showDivFix(+2);">The Pearl In The Cosmic Shell</h2>
            <p class="blog__text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ..."</p>
            <button class="blog__button" onclick="blog__showDivFix(+2);">Read More</button>
          </div>
      </div>

      <div class="blog__post">
          <div class="blog__picture" onclick="blog__showDivFix(+3);">
            <img class="blog__thumbnail" src="img/Picture3.jpg" alt="The Muse">
          </div>
          <div class="blog__content">
            <h2 class="blog__title" onclick="blog__showDivFix(+3);">The Muse</h2>
            <p class="blog__text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <button class="blog__button" onclick="blog__showDivFix(+3);">Read More</button>
          </div>    
      </div>

  </div>


</div>

那个CSS，除了特殊的类:

，我觉得是无关紧要的

/* 特殊类 */

.is-displayed {
    display: inline-block;
}

.is-block {
    display: block;
}

.is-discernable {
    opacity: 1;
}

.is-visible {
    visibility: visible;
}

.no-cursor {
    cursor: none;
}

和Javascript，其中只有开关有效，而不是select或：

var blog__slideIndex = 1;
blog__showDivs(blog__slideIndex);

function blog__showDivFix(n) {
    blog__allDivs();
    blog__altDivs(n);
}

function blog__plusDivs(n) {
    blog__showDivs(blog__slideIndex += n);
}

function blog__altDivs(n) {
    blog__showDivs(blog__slideIndex = n);
}

function blog__showDivs(n) {
    var i;
    var x = document.getElementsByClassName("post__slide");
    if (n > x.length) {blog__slideIndex = 1}
    if (n < 1) {blog__slideIndex = x.length}
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    x[slideIndex-1].style.display = "block";
}

function blog__allDivs() {
    var x = document.getElementById("post");
    var y = document.getElementById("blog");
    x.classList.toggle('is-displayed');
    y.classList.toggle('is-visible');
}

非常感谢您的帮助。我希望这个怪癖对你和我一样有趣（如果不那么令人生畏的话！）。

Answer 1

以下是我的解决方法，以防其他人遇到同样的问题：

首先，我删除了 function__showDivs(n) 中的错误：x[blog__slideIndex-1].style.display = "block"; （而不是 x[slideIndex-1].style.display = "block"
其次，我使用事件侦听器将 onclick 事件从 html 移动到 js，例如：

var postPicture = document.getElementsByClassName("post__picture");

//函数

for (var i = 0; i < postPicture.length; i++) { postPicture[i].addEventListener('click', function() { blogAllDivs(); }，错误的）; }
我将博客的 js 移动到一个 .js 文件，与保存画廊的 js 的文件分开 (scripts.js)，并将它链接到博客 html: 博客scripts.js.
最后，我将我的博客scripts.js 的加载时间推迟到 DOM 的加载时间，这样它就有了可听的东西，并将它放在body 的底部，只是为了确定。

希望对您有所帮助！

如何重用图库中的特定功能到博客以在所有 post 的图库视图和幻灯片视图中的特定 post 之间切换

How can I reuse a specific function from a gallery to a blog to switch between gallery view of all posts and a specific post in slideshow view

javascript

post

blogs

code-reuse

deadlines