不能 select 元素的兄弟姐妹使用 jQuery

Question

我似乎尝试了 .siblings、.parents().siblings 的所有组合，有和没有 $(this)。或者只是 'this'，我这辈子都无法得到 jquery 到 select 所点击元素的同级元素。

这是相关的 html:

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

这是我开始工作的相关 jquery，但它 select 并打开页面上那个 class 的每个实例：

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

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

我在页面上有多个这样的 .opener class，我只想更改被单击元素的同级元素上的 CSS。我是不是用错了方法？

编辑：它目前 select 是 class 的每个实例，因为这是唯一以任何方式起作用的东西。

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>

Answer 2

当单击 opener 元素时，您需要首先找到父元素，为此您可以使用 closest()，然后找到 hideShow 元素并应用您的 CSS 在那之上。

试试下面的代码-

$('.opener').click(function() {
  $('.hideShow').hide()
  const hideShow = $(this).closest('.showButton').find('.hideShow').show();
});

.hideShow {
  display: none;
}

<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>

Answer 3

请使用以下方法。使用 next() 到 select 下一个元素或 prev() 到 select 前一个元素。并使用普通函数然后使用箭头函数来绑定 this 关键字。

 jQuery(document).ready(function() {
            let clickCount = 0;
            $('.opener').click(function() {
                if (clickCount == 0) {
                    $(this).next().css('visibility', 'visible');
                    $(this).next().css('position', 'static');
                }
            });
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
 <div class='showButton'>
        <p class='opener'>Get The Code</p>
        <code class='hideShow' style="visibility: hidden;">Code tag</code>
    </div>

不能 select 元素的兄弟姐妹使用 jQuery

Can't select the siblings of an element using jQuery

javascript

jquery

siblings