Question

我在黑暗中磕磕绊绊，所以寻求有关如何改善元素css变化的帮助。

我试图创建两个框，单击时将阴影从一种颜色更改为下一种颜色，然后再返回原始颜色。我试图让他们独立改变颜色。当我点击任一元素时，它们都会改变。

我是否需要建立父子关系？再次，完全在黑暗中

    p {
      height: 50px;
      width: 100px;
      background-color: #555;
    }
    .rectangles {
      height: 50px;
      width: 100px;
      background-color: #eee;
    }

    <html>
    <head>
    
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("p").click(function(){
            $("p").toggleClass("rectangles");
        });
    });
    </script>

    </head>
    <body>
    
    
    <p class="rectangles"></p>
    <p class="rectangles"></p>
    
    
    
    </body>
    </html>

Answer 1

您需要将"p"更改为this，以便您的代码变为$(this).toggleClass("rectangles");

这将只选择相关项目。

见下文：

＆＃13;

    p {
      height: 50px;
      width: 100px;
      background-color: #555;
    }
    .rectangles {
      height: 50px;
      width: 100px;
      background-color: #eee;
    }

＆＃13;

    <html>
    <head>
    
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("p").click(function(){
            $(this).toggleClass("rectangles");
        });
    });
    </script>

    </head>
    <body>
    
    
    <p class="rectangles"></p>
    <p class="rectangles"></p>
    
    
    
    </body>
    </html>

＆＃13;

如何独立更改元素类

1 个答案: