如何重用畫廊中的特定功能到博客，以便在所有帖子的畫廊視圖和幻燈片視圖中的特定帖子之間切換

Question

我很高興在Stack Overflow尋求編碼專家的幫助。

我正在嘗試復制Javascript函數。 我之前已經使用它在單個網頁上顯示幻燈片放映圖片視圖中的圖庫縮略圖視圖中單擊的元素。 多虧了您的幫助，它運行良好。 您可以在這里看到該帖子：

如何在同一頁面上的圖庫縮略圖和特定幻燈片圖像之間切換？

現在，我正在嘗試編寫一個類似的功能，以在單個網頁上顯示在幻燈片放映正常視圖中的圖庫縮略圖視圖中單擊的博客帖子。 我編寫了一個函數，該函數的功能與第一個函數相同，只是我在各處都對其進行了重命名，以免與第一個沖突，該函數在網站的圖庫頁面上使用。 我檢查並重新檢查了名稱，盡管具有相同的功能，以相同的方式使用，但仍然無法使用。

我想要的博客風格是一個類似磚石的博客，以Magtastico為主題的例子很好，但是所有事情都在一個頁面上發生：

http://preview.themeforest.net/item/magtastico- response-masonry-blog-wordpress-theme / full_screen_preview / 7569502？clickthrough_id = 1224073649＆redirect_back = true＆ref = cirvitis

我修改了一些其他功能，並嘗試了名稱和事件的變體，但是問題仍然存在，僅顯示一個Divs，每次都顯示相同的結果，無論我單擊哪個縮略圖。 當在圖庫頁面上應用時，相同的Javascript可以選擇我單擊的特定Javascript，然后在幻燈片視圖中顯示。

通常，我會在幾天的時間里單獨調試它，但是該項目已接近最后期限，因此，非常感謝您的幫助。

以下是我編寫的相關HTML，CSS和Javascript：

帶有onclick觸發器的HTML：

<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，選擇器無效的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');
}

非常感謝您的幫助。 我希望這個怪癖對您和我都一樣有趣（即使不那么令人生畏！）。

Answer 1

如果其他人遇到相同的問題，這是我解決的方法：

1. 首先，我刪除了函數__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（scripts.js）分開的.js文件，並將其僅鏈接到博客html：blogscripts.js。

4. 最后，我將我的blogscripts.js從加載開始推遲到加載DOM，以便它可以監聽一些內容，並將其放置在主體的底部，以確保。

我希望這有幫助！