Question

我在这里有一个jsfiddle：http://jsfiddle.net/ecWT5/

它有3种不同颜色的块。

我想在块上显示块的颜色。

这些块都有一个类名。

所以如果我使用类名获得颜色，它会在所有块上显示相同的颜色

是否可以使用带有类名的$（this）块来获取此块的颜色。

    <!DOCTYPE html>
    <html lang="en">

        <head>  
            <meta charset="UTF-8">  
            <!--jQuery-->
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>


            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                    font-family: sans-serif;
                }

                .wrap{
                    margin: 50px;
                }

                .my_Box{
                    color: white;
                    text-align: center;
                    width: 200px;
                    height: 200px;
                    margin: 0 20px 0 0;
                    float: left;
                }

                .at-blue-lighter{
                    background-color: #70afe4;
                }

                .at-blue-light{
                    background-color: #4597dc;
                }

                .at-blue{
                    background-color: #267ec8;
                }
            </style>



            <title>Title of the document</title>
        </head>

    <body>

        <div class="wrap">
                <div class="my_Box at-blue-lighter" ><span></span></div>
                <div class="my_Box at-blue-light" ><span></span></div>
                <div class="my_Box at-blue" ><span></span></div>
            </div>

        <script>

            $(function(){

                var color = $('.my_Box').css('backgroundColor'); 

                $('.my_Box span').html(color);
            })

        </script>

    </body>

    </html>

Answer 1

尝试使用.text()，

的接收器功能

$('.my_Box').text(function(){
  return $(this).css('backgroundColor'); 
});

DEMO

旁注：此处使用.html()似乎无关紧要，因此请使用.text()

在您的代码中，

$('.my_Box').css('backgroundColor')

您在.css()个元素上调用collection，因为它只返回该集合中第一个元素的css属性值。

 $('.my_Box span').html(color);

作为第一步的结果，具有选择器.my_Box span的每个元素都被赋予了相同的值。

JQuery $（this）带有类名

1 个答案:

DEMO