Блог

Главная - Вопросы по программированию - jQuery $ (this) с именем класса

jQuery $ (this) с именем класса

#jquery

#jquery

Вопрос:

У меня здесь есть 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>

Комментарии:

1. Что вы уже пробовали?

Ответ №1:

Попробуйте использовать функцию приемника .text() ,

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

ДЕМОНСТРАЦИЯ

Примечание: использование .html() здесь кажется неуместным, поэтому вместо этого используйте .text()

В вашем коде,

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

Вы вызываете .css() над a collection элементов, поскольку он вернет только значение свойства css первого элемента в этой коллекции.

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

В результате первого шага каждому элементу с селектором .my_Box span было присвоено одинаковое значение.