Question

在我的例子中：

JS

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

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

你有一个带文字的基本身体。可点击元素（在这种情况下是＆＃39;按钮＆＃39;）会导致可滚动容器出现并且“悬停”＃39;在原始主体上方，可以通过单击此容器外部再次隐藏。

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

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

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

Answer 1

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

$(this).index()

然后，您必须选择scroll_container类$('.scroll-container')的所有元素，并通过将所点击元素的索引传递给.eq()方法{{}来将匹配元素集合减少到一个元素。 1}}。最后，您必须向其.eq($(this).index())添加show类。

由于逻辑已更改，您必须将对addClass('show')和button点击事件执行的操作分开。他们现在不做反向行动，所以他们不再是“乞讨者”了。

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

.overlay

<强>更新

关于$('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'); }方法，您应该记住一件事。正如它写的here：

如果没有参数传递给.index（）方法，则返回值是一个整数，表示jQuery对象中第一个元素相对于其兄弟元素的位置。

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

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

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

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

index()

此处已更新codepen。

Answer 2

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

<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

我希望它有所帮助。

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

2 个答案: