使用 "this" 选择器仅在一个 div 上应用 CSS 而不是所有 div

Question

我有 4 个 div 容器，它们都具有相同的 classes。在 div 容器中，我可以单击 "Show more" 以在更多信息中为另一个 div 容器设置动画。在另一个容器中，我可以单击 "Go back" 以显示原始容器。现在，当我单击 4 个容器中的一个时，所有容器都会同时切换。

如何仅应用我单击它的 p 元素的容器的动画（缓动）？

这是我的 HTML 代码（对于一个 div 容器，其余容器完全相同）：

<div class="photo_box ">
   <div class="card-more-informations">
      <p>Show more</p>

      <div class="more-information-container">
         <p> Lorem ipsum dolor</p>
         <h1>Go back</h1>
      </div>
   </div>
</div>

这是我的 jquery 代码：

$('.card-more-informations > p').on('click', function() {
         $('.more-information-container').css({"right": "0%"})
    });

    $('.more-information-container > h1').on('click', function() {
        $('.more-information-container').css({'right': ''})
    });

现在，当我单击带有 "Show more" 的 p 元素时，所有带有 class more-information-container 的容器都会同时打开。当我单击 "Go back" 时，所有容器同时关闭。我希望只有容器在我分别单击它的 p h1 元素的位置打开和关闭。

（我没有 post CSS因为我想这对于解决我的问题是不必要的。）

提前致谢！

Answer 1

使用 this 将引用被点击的元素，因此将您的代码更改为：

$('.card-more-informations > p').on('click', function() {
     $(this).next('.more-information-container').css({"right": "0%"})
});

$('.more-information-container > h1').on('click', function() {
    $(this).parent('.more-information-container').css({'right': ''})
});

这里我们使用.next()和.parent()到select适当的元素。我们还传入 class '.more-information-container' 以确保这是我们唯一可以 select.

$('.card-more-informations > p').on('click', function() {
  $(this).next('.more-information-container').css({
    "color": "red"
  })
});

$('.more-information-container > h1').on('click', function() {
  $(this).parent('.more-information-container').css({
    'color': 'black'
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="photo_box ">
  <div class="card-more-informations">
    <p>Show more</p>

    <div class="more-information-container">
      <p> Lorem ipsum dolor</p>
      <h1>Go back</h1>
    </div>
  </div>
</div>
<div class="photo_box ">
  <div class="card-more-informations">
    <p>Show more</p>

    <div class="more-information-container">
      <p> Lorem ipsum dolor</p>
      <h1>Go back</h1>
    </div>
  </div>
</div>
<div class="photo_box ">
  <div class="card-more-informations">
    <p>Show more</p>

    <div class="more-information-container">
      <p> Lorem ipsum dolor</p>
      <h1>Go back</h1>
    </div>
  </div>
</div>

^{（在前面的代码片段中我使用颜色来说明变化）}

使用 "this" 选择器仅在一个 div 上应用 CSS 而不是所有 div

Apply CSS only on one div instead of all divs with "this" selector

html

css

jquery

this