Question

我是jquery / java脚本的新手，并试图找出它是如何工作的。我正在尝试重新创建此页面http://jenniferdewalt.com/mondrian.html。

我的HTML是以下

<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>`

我需要选择正方形并使用此正方形的颜色为画布上色。试图做smth。像那样

`$(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);
}`

})

但它不起作用。

然后我查看了网站上的js文件，尝试重新创建它并且仍然存在一些问题

`$(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 );
})`;

});

我无法理解var color ='white'中的'white'取自哪里，所以也许问题出在哪里？

Answer 1

为什么要经历所有这些过程，为什么不做这样的事情：

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

     });
      });

或使用 addClass 来避免内联CSS

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

         });
          });

您要添加的课程的CSS

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

针对您的案例的方法：在您的案例和评论中，请参阅以下示例

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

});

See working demo here

使用jquery设置div的颜色时出现问题

1 个答案:

使用jquery设置di​​v的颜色时出现问题

1 个答案:

使用jquery设置div的颜色时出现问题