多重顯示/隱藏滾動容器

$('button').on('click', showHide); 
$('.overlay').on('click', showHide); 

function showHide(){ 
    $('.scroll-container').toggleClass('show'); 
    $('.content-container').toggleClass('no-scroll'); 
    $('.overlay').toggleClass('opacity'); 
    }

你有一個基本的身體文本。一個可點擊的元素（在這種情況下是一個'按鈕'）會導致一個可滾動的容器出現，並將其懸停在原始主體上，通過點擊此容器外部可以再次隱藏該原始主體。

我不是很擅長JavaScript，在這個例子中，我受到了一位朋友的幫助。我現在正在努力的是我需要多個不同的可點擊元素，顯示一個類似的滾動容器，但內容不同。

我正在爲一個投資組合網站做這件事，所以想象一個頁面上的一堆照片，點擊後會導致一個物體懸停在原始內容上，進一步闡述點擊的項目。我是否爲每個項目創建了多個ID以及多個滾動容器ID，並且只需複製JavaScript幾次？

我希望這是有道理的，我希望有人能夠向我解釋我如何能夠創建提議的效果。

來源

2015-10-05 Namrad

提供您的源代碼。 –

對不起，現在應該修復。 – Namrad

首先，您必須在應該打開的按鈕和容器之間建立連接。一種方法是使用它們的索引，這樣當第一個按鈕被點擊時，第一個容器就會打開。你可以在你的函數中使用點擊對象的引用this，以獲得它的索引。就像這樣：

$(this).index()

然後，你必須選擇所有元素與$('.scroll-container')scroll_container類，並通過將點擊的元素的索引.eq()方法.eq($(this).index())減少匹配的元素集合到一個的。最後，您必須爲其添加show類addClass('show')。

而且由於邏輯已更改，因此您必須單獨完成button和.overlay單擊事件的操作。他們現在不會做出反向行動，所以他們不再是「扯蛋」了。

http://codepen.io/anon/pen/LpWwJL

$('button').on('click', show); 
$('.overlay').on('click', hide); 

function show(){ 
    $('.scroll-container').eq($(this).index()).addClass('show'); 
    $('.content-container').addClass('no-scroll'); 
    $('.overlay').addClass('opacity'); 
} 

function hide() { 
    $('.scroll-container').removeClass('show'); 
    $('.content-container').removeClass('no-scroll'); 
    $('.overlay').removeClass('opacity'); 
}

UPDATE

有一件事你應該記住關於$(this).index()方法。因爲它是寫here：

如果沒有參數被傳遞給所述的.index（）的方法，所述返回值是表示所述第一元素的jQuery對象相對於其兄弟元素中的位置的整數。

這意味着觸發元素應該有共同的父親爲了保持我們的邏輯。

在這種情況下：https://stackoverflow.com/posts/32946956/edit，觸發scroll_container外觀的元素具有不同的父節點（它們被放置在3個不同的divs中）。因此，如果我們爲每個方法調用index()方法，它將返回'0'，因爲它們是其父節點中的第一個也是唯一的元素。

其實就意味着你必須讓他們的父元素，而不是他們自己的順序。這可以通過使用parent()方法index()之前實現：

$(this).parent().index()

這裏被更新codepen。

來源

2015-10-05 10:59:17

我很困惑，這實際上是我需要的。我不明白你如何設法創建三個獨立的滾動容器以及如何將它們鏈接到各個按鈕。我需要更多這些單獨的可點擊按鈕和鏈接滾動容器，你能解釋究竟發生了什麼嗎？ – Namrad

更新了我的答案。希望現在會清楚。 –

我爲我的遲到響應對不起，我一直忙着現在明白了幾個小時了，但對我來說是新來的JavaScript，因爲我我不完全理解它。我想打開一個滾動容器，點擊關聯的元素（在我的情況下會是.img），並在點擊滾動容器時隱藏。它與按鈕一起工作，我只是不明白如何將其應用於圖像。隨着我現在的嘗試，圖像響應，但只有Header1出現。我一定在索引上做錯了什麼，但我不確定是什麼。你可以幫幫我嗎？ – Namrad

如果我是你，我會實現一個泛型函數來顯示使用設在按鈕相同功能的不同的內容。所以，我們需要的東西到關係與該內容的點擊，我們可以縮小按鈕設定值：

<button data-id="1">Click me 1!</button> 
<button data-id="2">Click me 2!</button>

做出來的，當我們點擊按鈕，我們應該得到的值將其發送給我們的函數：

$('button').on('click', function(){ 
     var dataButtonValue = $(this).data('id'); 
    });

然後我們就可以與內容例如使用data-content-id

<div class="content" data-content-id="1">your wording</div> 
<div class="content" data-content-id="2">your wording</div>

有了這些，我們可以管理我們要顯示什麼樣的內容符合這取決於日點擊。

function showHide(id){ 
    $('.content[data-content-id="' + id + '"]').toggleClass('show'); 
}

DEMO

我希望它幫助。

來源

2015-10-05 11:11:14 gon250

多重顯示/隱藏滾動容器

回答

相關問題