0

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

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

如何在同一页面上的画廊缩略图和特定幻灯片图像之间切换？

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

我想要的博客风格是一个类似砖石的博客，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');
}

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

4

1 回答 1

0

以下是我如何解决它以防其他人遇到同样的问题：

  1. 首先，我删除了 function__showDivs(n): x[blog__slideIndex-1].style.display = "block"; 中的错误。（而不是 x[slideIndex-1].style.display = "block"

  2. 其次，我使用事件监听器将我的 onclick 事件从 html 移动到 js，例如：

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

    // 职能

    for (var i = 0; i < postPicture.length; i++) { postPicture[i].addEventListener('click', function() { blogAllDivs(); }, false); }

  3. 我将博客的 js 移动到一个 .js 文件，与保存画廊 js 的文件 (scripts.js) 分开，并将其链接到博客 html：blogscripts.js。

  4. 最后，我将我的 blogscripts.js 从加载延迟到加载 DOM，以便它有一些东西可以监听，并将它放在正文的底部，只是为了确定。

我希望这有帮助！

于 2018-04-11T07:04:30.143 回答