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

Question

我有 4 个 div 容器，它们都有相同的类。在 div 容器中，我可以单击“显示更多”以在更多信息中为另一个 div 容器设置动画。在另一个容器中，我可以单击“返回”以显示原始容器。现在，当我单击 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': ''})
    });

现在，当我单击带有“显示更多”的 p 元素时，所有带有 more-information-container 类的容器都会同时打开。当我单击“返回”时，所有容器同时关闭。我希望只有容器在我分别单击 p h1 元素的地方打开和关闭。

(我没有发布 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() 来选择合适的元素。我们还传入类 '.more-information-container' 以确保这是我们唯一可以选择的内容。

$('.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>

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