Question

我创建了一个页面，用户可以在其中放置表格中单元格的图标（更改背景）。我希望这是一个协作的事情，以便将更改保存到服务器，以便将要进入网站或已经在网站上的另一个用户可以看到更改。

从概念上讲，我认为我已经做好了准备：我需要将更改存储在后台（服务器）的某个地方（服务器），在该页面加载时，您可以要求更改的当前状态，然后每次有人绘制时某些东西（单击js单击），我需要更新网页状态（在服务器上）。

我搜索了firebase或Myjson。但是，即使开始搜索后，我也不知道从哪里开始。如果有人可以给我一点推动力，我将永远感激不已。

现在该网站的工作方式如下：


<div class="toolbar">
    <div class="toolcontainer">
    <div id="i1"></div>
</div>
</div>

<div id="drawing">
    <div class="row">
      <div class="pixel"></div>
      <div class="pixel"></div>
      <div class="pixel"></div>
      <div class="pixel"></div>
      <div class="pixel"></div>
      <div class="pixel"></div>
      <div class="pixel"></div>
      <div class="pixel"></div>
      <div class="pixel"></div>
      <div class="pixel"></div> 
</div>
</div>

//variable with url stored inside
icon = '(icon.png)'


// onclick function classes 
$(".pixel").click(function() {
    //function that changes background to url
    $(this).css("background-image", "url(" + icon +")");
});


//id i1 till 23 + change var on click 
$('#i1').click(function (){
    icon = "icon1.png";
});

$('#i2').click(function (){
    icon = "icon2.png";
});


.toolbar{
    position: fixed;
    width: 100%;

    background-color: grey;
    border: black 1px solid;
}


.toolcontainer{
    width: 100%;
    height: 100%;
     display:flex;
}

#drawing{
    height: 14040px;
    width: 9933px;
    background-color: black;
    border-spacing: 1px;
    border: 1px solid black;
}

  .row {
      display: table-row;
    }

  .pixel {
    display: table-cell;
    background-color: white;
    width: 30px;
    height: 30px;
    }



#i1{
    position: relative;
    width: 3vw;
    height: 3vw;
    border: black 1px solid;
    display: inline-block;
    margin:0.7%;
    background-color: white;
    background-image: url("icon1.png");
}

如何允许用户更改div的背景图片并将其保存给所有查看者？

0 个答案: