Question

我有Div的列表如下所示。当我点击每个Div的Click Me时，我想改变Heading的颜色，即Heading1，Heading2，Heading3。我已经编写了与下面相同的JQuery

    <pre>
     <div>
       <div>
          <span class="Heading">Heading1</span>
          <div>Content1</div>
          <a class="ClickMe">Click Me</a>
        </div> 
      </div>
      <div>
          <div>
            <span class="Heading">Heading2 </span>
            <div>Content2</div>
               <a class="ClickMe">Click Me</a>
           </div> 
      </div>
      <div>
          <div>
            <span class="Heading">Heading3 </span>
            <div>Content3</div>
               <a class="ClickMe">Click Me</a>
           </div> 
      </div>
      <div>
           <div>
            <span class="Heading">Heading3 </span>
            <div>Content3</div>
               <a class="ClickMe">Click Me</a>
           </div> 
      </div>    

  <script>
    $('document').ready(function(){
         $(".ClickMe").click(function(){
       $(this).parent().children(0).toggleClass('red');
     });
    });
  <script>


<style>
  .red
  {
    color : red;
  }
</style>

1.现在，当我点击Click Me时，红色应用于整个Div。

2.除了使用DOM

之外，还有其他方法可以将红色应用于单独的标题

Answer 1

$(document).ready(function(){
    $(".ClickMe").click(function(){
        $(this).siblings('.Heading').toggleClass('red');
    });
});

http://api.jquery.com/siblings/

Answer 2

$(this).closest('.Heading').toggleClass('red');

Answer 3

$('document').ready(function(){
  $(".ClickMe").click(function(){
    $(this).closest('.Heading').toggleClass('red');
  });
});

如何在不使用DOM的情况下更改Class

3 个答案: