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

【问题标题】：How to change Class without using DOM如何在不使用 DOM 的情况下更改 Class
【发布时间】：2023-03-09 18:23:01
【问题描述】：

我有如下的 Div 列表。当单击每个 Div 的 Click Me 时，我想更改标题的颜色，即 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 之外，我还有其他方法可以单独将红色应用于标题

【问题讨论】：

很明显你不知道 DOM 的作用或含义。
这没有任何意义，“除了使用 DOM”。猜猜看，不使用 DOM 就无法更改 DOM。
我有一个在 2 个 div 内的表，所以我需要浏览父表，然后我想在 div 中使用为该表应用的类来访问表 CSS 属性以防万一我需要改变它
你也可以使用 $(".ClickMe").click(function(){ $(this).closest('.heading').toggleClass('red'); });

标签： javascript jquery html css dom

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：