如何重用从画廊到博客的特定功能，以在所有帖子的画廊视图和幻灯片视图中的特定帖子之间切换答案

【问题标题】：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如何重用从画廊到博客的特定功能，以在所有帖子的画廊视图和幻灯片视图中的特定帖子之间切换
【发布时间】：2018-09-09 19:25:58
【问题描述】：

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

我正在尝试复制一个 Javascript 函数。我之前已经使用它在单个网页上显示在幻灯片图片视图中的画廊缩略图视图中单击的元素。它工作得很好，感谢您的帮助。您可以在此处查看该帖子：

How to toggle between gallery-thumbnails and a specific slideshow-image on the same page?

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

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

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

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

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

以下是我编写的相关 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，其中只有开关起作用，选择器不起作用：

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');
}

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

【问题讨论】：

您可以尝试在 Javascript 中而不是在 HTML 中附加您的侦听器，这很难管理（正如您所经历的那样）并且与 eval 一样糟糕。
感谢您这么快的回答！我会尝试这样做，也许使用一些 id 选择器。虽然，我还在画廊页面的 HTML 中附加了我的听众，并且相同的 Javascript 运行良好。我彻底检查了它们，所以我还不明白为什么会发生这种情况，但如果它仅适用于 Javascript，那就欢呼吧。

标签： javascript post blogs code-reuse deadlines

【解决方案1】：

如果其他人遇到同样的问题，我是这样解决的：

首先，我删除了函数__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
我将博客的 js 移动到一个 .js 文件中，与保存画廊 js 的文件 (scripts.js) 分开，并将其链接到博客 html：blogscripts.js。

我希望这会有所帮助！

【讨论】：