javascript - 多个显示/隐藏可滚动容器

Question

在我这里的例子中:

Example

JS

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

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

您有一个带有文本的基本正文。可点击元素(在本例中为“按钮”)会导致可滚动容器出现并“悬停”在原始主体上，通过在该容器外部单击可再次隐藏该主体。

我不是很擅长 JavaScript，这个例子是在 friend 的帮助下完成的。我现在遇到的问题是我需要多个不同的可点击元素，显示类似的滚动容器，但内容不同。

我正在为一个投资组合网站做这件事，所以想象一下页面上的一堆照片，当点击这些照片时会导致一个主体悬停在原始内容上，进一步详细说明点击的元素。我是否为每个元素创建多个 ID，以及多个滚动容器 ID，然后只复制 JavaScript 几次？

我希望这是有道理的，我希望有人能够向我解释我如何能够创造出所提出的效果。

Answer 1

首先，您必须在按钮和应打开的容器之间建立连接。一种方法是使用它们的索引，以便在单击第一个按钮时，第一个容器将打开。您可以在函数中使用被单击对象的 this 引用，以获取其索引。像这样:

$(this).index()

然后，您必须选择所有具有 scroll_container class $('.scroll-container') 的元素，并通过传递单击元素的索引到 .eq()方法 .eq($(this).index())。最后，您必须向它添加 show 类 addClass('show')。

并且由于逻辑发生了变化，您必须将在 button 和 .overlay 单击事件上完成的操作分开。他们现在不做反向 Action ，所以他们不再是“切换器”。

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

更新

关于 $(this).index() 方法，您应该记住一件事。正如所写here :

If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

这意味着触发元素应该有共同的父元素以维护我们的逻辑。

在这种情况下:https://stackoverflow.com/posts/32946956/edit ，触发 scroll_container 外观的元素具有不同的父节点(它们被放置在 3 个不同的 div 中)。因此，如果我们为它们中的每一个调用 index() 方法，它将返回“0”，因为它们是其父节点中的第一个也是唯一的元素。

实际上这意味着你必须得到他们父元素的顺序，而不是他们自己的。这可以通过在 index() 之前使用 parent() 方法来实现:

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

此处更新codepen .