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

我很高兴向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

通常,我会在几天内单独调试这个项目,但这个项目已经接近最后期限,因此,非常感谢您的帮助。

下面是我编写的相关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');
}

非常感谢你的帮助。我希望这个怪癖对你和我一样有趣(如果不那么令人畏惧的话!)。