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类，我只想在clicked元素的同级上更改CSS。我会用这种错误的方式吗？

edit：当前，它将选择该类的每个实例，因为这是唯一可以任何方式工作的东西。

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()选择下一个元素，或使用prev()选择前一个元素。并使用普通功能然后使用箭头功能来绑定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>

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

3 个答案: