CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3556682
user3556682

Reputation: 3

Problems with setting the color for div's with jquery

I'm new to jquery/java script and trying for find out how it works. I'm trying to recreate this page http://jenniferdewalt.com/mondrian.html.

My html is the following

<DOCTYPE html> <html> head <title>Change the color</title> <meta http-equiv = 'content-type' content = 'text/html';charset='windows-1251'> <link rel='stylesheet' href='index.css'> <script type = 'text/javascript' src = 'jquery-2.1.0.min.js'></script>

`</head>`

`<body>`
    `<div class='b-body_text'>
            <div class='b-text'>
                Pick a color and paint the canvas
            </div>
    </div>`

    `<div class='b-container'>
        <div class='b-container__squares'>
            <ul class='b-squares'>`
                `<li class='b-squares__item' id='b-item__red'></li>`
                `<li class='b-squares__item' id='b-item__yellow'></li>`
                `<li class='b-squares__item' id='b-item__blue'></li>`
                `<li class='b-squares__item' id='b-item__white'></li>`
            `</ul>`
        `</div>`

        `<div class='b-container__table'>`
            `<div class='b-table'>`
                `<div class='b-row1'>`
                    `<div class='b-row' id='row1_box1'></div>`
                    `<div class='b-row' id='row1_box2'></div>`
                    `<div class='b-row' id='row1_box3'></div>`
                    `<div class='b-row' id='row1_box4'></div>`
                `</div>`
                ********** 4 rows***************
        `</div>`
        `</div>`
        `</body>`
         `</html>`

I need to pick the square and color the canvas with the color of this square. Tried to do smth. like that 

`$(document).ready(function()`

{somefunction1 = function() { $('.b-squares__item').click(receiveColor); }

`receiveColor = function()
{
    var color  = $(this).css('background-color');
}`

`$('.b-row').click(setColor);`

`setColor = function()
{
    $(this).css('background', somefunction1);
}`

})

but it doesn't work.

Then I looked at the js file from the site, tried to recreate it and it still has some problems

`$(document).ready(function () {`

`var color = 'white'`

`$('.b-squares__item').on('click', function () {
    color = $(this).css('background-color');
})`

`$('.b-row').on('click', function () {

    $(this).css('background-color', color );
})`;

});

I cannot understand where'white' in var color = 'white' is taken from, so maybe that's where the problem is from?

Upvotes: 0

Views: 58

Answers (1)

Sleek Geek
Sleek Geek

Reputation: 4686

Why go through all these process, why not just do something like:

$( document ).ready(function() {    
    $('.b-squares__item').click(function () {
          $(this).css('background-color', 'white');

     });
      });

Or use addClass to avoid inline CSS

$( document ).ready(function() {    
        $('.b-squares__item').click(function () {
              $(this).addClass('class-name');

         });
          });

CSS of the class you're adding

.class-name {
   background-color: white;
}

Method for your case: In your case and from your comment, see the example below

$(document).ready(function(){
    $(".b-squares__item").click(function () {
        $(".b-row").eq($(this).index()).toggleClass($(".b-squares__item").attr("class"));
    });

});

See working demo here

Upvotes: 2

Related Questions