javascript - 无法使用 jQuery 选择元素的同级元素

Question

我似乎尝试了 .siblings、.parents().siblings、有或没有 $(this) 的所有组合。或者只是“this”，我一生都无法让 jquery 选择被单击的元素的同级元素。

这是相关的html:

<div class='showButton'>
      <p class='opener'>Get The Code</p>
      <code class='hideShow'>

这是我已经开始工作的相关 jquery，但它选择并打开页面上该类的每个实例:

$('.opener').click( () => {
if(clickCount == 0){
    $('.hideShow').css('visibility', 'visible');
    $('.hideShow').css('position', 'static');

任何形式的 $(this)、$(this > '.hideShow')、$(this).siblings() 或 $(this).parents('.showButton').siblings() 似乎都有零影响，无论是我的设计还是来自互联网。您在上面看到的 JS 实际上是唯一会以任何方式影响页面的东西。

我的页面上有多个 .opener 类，我只想更改被单击元素的同级元素上的 CSS。我是否以错误的方式处理这个问题？

编辑:它当前选择该类的每个实例，因为这是唯一可以以任何方式工作的实例。

Answer 1

$('.hideShow') 将匹配所有 .hideShow，而您需要使用 this 并找到 。 hideShow 在其父级中。

$('.opener').click(function(e) {
  const hideShow = $(e.currentTarget).parent().find('.hideShow');
  hideShow.css('visibility', 'visible');
  hideShow.css('position', 'static');
});

.hideShow {
  visibility: hidden;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class='showButton'>
  <p class='opener'>Get The Code</p>
  <code class='hideShow'>Code</code>
</div>

<div class='showButton'>
  <p class='opener'>Get The Code</p>
  <code class='hideShow'>Code</code>
</div>

<div class='showButton'>
  <p class='opener'>Get The Code</p>
  <code class='hideShow'>Code</code>
</div>