jQuery Closest/Parent 不工作

Question

这段代码出了什么问题？点击没有任何反应

HTML

  <p>Click me</p>
    <h1 class="myClass">...........</h1>

  <p>Click me</p>
    <h1 class="myClass">-----------</h1>

CSS

hilight {
    background-color: yellow;
  }

jQuery

$( document ).on( "click", "p", function( ) {
  $( this ).closest( ".myClass" ).toggleClass( "hilight" );
});

实例 https://jsfiddle.net/djuccj7b/

Answer 1

您可以使用 Next Adjacent Selector ("prev + next") with context 设置为 this : p 元素到 select h1 元素是被点击的下一个元素兄弟 p元素

$( document ).on( "click", "p", function( ) {
  $( "+ .myClass", this ).toggleClass( "hilight" );
});

此外，您的 css 在 hilight

之前缺少 .

.hilight {
    background-color: yellow;
}

jsfiddle https://jsfiddle.net/djuccj7b/2/

Answer 2

1. 将 closest() 更改为 next()

2. 在 css 中在您的 class 姓名前加一个句点...

   .hilight { 背景色：黄色； }