单击Jquery多次

Question

我有以下html代码,在点击特定按钮我想要更改特定html元素的颜色.

<paper-button style="background:blue" class="blue"></paper-button>
<paper-button style="background:red" class="red"></paper-button>

这是我的剧本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $(".blue, .red").click(function(){
            $(".abc").css("background-color", $(".blue, .red").css("background-color"));
        });
    });
    </script>

单击这两个按钮时,该元素的颜色会发生变化,但会变为蓝色而不会变为红色.当我将我的代码更改为

<paper-button style="background:red" class="red"></paper-button>
<paper-button style="background:blue" class="blue"></paper-button>

在这种情况下,无论按下按钮,颜色都会变为红色.如何确保颜色更改为按下的按钮.

Answer 1

执行此操作时,您将获取dom中第一个元素的背景颜色$(".blue, .red").css("background-color").使用单击元素的背景颜色$(this):

   $(".blue, .red").click(function(){
       $(".abc").css("background-color", $(this).css("background-color"));
   });