多个 show/hide 个可滚动容器

Question

在我这里的例子中：

JS

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

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

您有一个带有文本的基本正文。可点击的元素（在本例中为 'button'）会导致出现可滚动的容器，并 'hover' 覆盖原始主体，单击该容器外部可再次隐藏。

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

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

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

Answer 1

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

$(this).index()

然后，您必须 select 所有具有 scroll_container class $('.scroll-container') 的元素，并通过传递被点击的索引将匹配元素集减少到一个.eq() 方法 .eq($(this).index()) 的元素。最后还得给它加上showclassaddClass('show')。

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

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://whosebug.com/posts/32946956/edit，触发 scroll_container 外观的元素具有不同的父节点（它们被放置在 3 个不同的 divs 中）。因此，如果我们为它们中的每一个调用 index() 方法，它将 return '0' 因为它们是其父节点中的第一个也是唯一的元素。

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

之前使用 parent() 方法来实现

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

此处更新codepen。

Answer 2

如果我是你，我会使用基于按钮的相同功能实现一个通用功能来显示不同的内容。因此，为此我们需要一些将点击与内容相关联的东西，我们可以在输出按钮中设置一个值：

<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

希望对您有所帮助。

多个 show/hide 个可滚动容器

Multiple show/hide scrollable containers

javascript

css

jquery

show

hide