我似乎尝试了 .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。我是否以错误的方式处理这个问题?
编辑:它当前选择该类的每个实例,因为这是唯一可以以任何方式工作的实例。
最佳答案
$('.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>
关于javascript - 无法使用 jQuery 选择元素的同级元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58830392/