时间戳

首页 > 解决方案 > 通过鼠标单击存储 div 背景颜色并在单击时将其释放到另一个 div

javascript - 通过鼠标单击存储 div 背景颜色并在单击时将其释放到另一个 div

问题描述

我/已经为这个问题苦苦挣扎了几天，尝试了几种不同的场景，但没有运气。

目标是从 2 个小的彩色左侧立方体（请参阅小提琴）中选择/存储背景颜色，并在单击右侧的任何框（基本上是 2x2 - 画布）后释放它

我尝试了 3 个相似但略有不同的 JS 代码，所以我将发布所有 3 个，如果这违反规则，我将编辑为仅 1 个。

对于 html 和 css，请打开小提琴链接https://jsfiddle.net/Husky931/cvhoz2af/

在纯 JS 中回答帮助，感谢没​​有库。

试一试

function setColor() {
    var x = document.getElementById('red').style.backgroundColor;
    localStorage.setItem('bgcolor', x);
  }
  function getColor() {
    var y = document.getElementById('r1b1').style.backgroundColor;
    localStorage.getItem('bgcolor');
  }

尝试 2

var pickRed = document.getElementById('red');

pickRed.addEventListener("click", function() {
  var redOn = pickRed.style.backgroundColor;
  localStorage.setItem('bgcolor', redOn);

  var releaseRed = document.getElementById('r1b1');
  releaseRed.addEventListener('click', function() {
    var inside = releaseRed.style.backgroundColor;
    inside = localStorage.getItem('bgcolor');    
  });
})

尝试 3

var selectRed = document.getElementById('red');

selectRed.addEventListener("click", function deployColor() {
  var storeRed = selectRed.style.backgroundColor;
  localStorage.setItem('bgcolor', selectRed);

  var selectR1B1 = document.getElementById('r1b1');
  selectR1B1.addEventListener("click", function() {
     if (!localStorage.getItem('bgcolor')) { // if (!selectR1B1.style.background =='red') 
      selectR1B1.style.backgroundColor = storeRed; //   selectR1B1.style.backgroundColor == 'red';
    }
    else {
      deployColor();
    }
  })
})

标签： javascript

解决方案

这就是你所需要的：


<div id="field">

      <div id="leftPalette">
         <div class="paintingCubes" id="red" onclick="localStorage.bgcolor = 'red'"></div>
         <div class="paintingCubes" id="blue" onclick="localStorage.bgcolor = 'blue'"></div>
      </div>

      <div id="canvas">
         <div id="row1">
            <div id="r1d1" onclick="this.style.backgroundColor = localStorage.bgcolor"></div>
            <div id="r1d2" onclick="this.style.backgroundColor = localStorage.bgcolor"></div>            
         </div>
         <div id="row2">
            <div id="r2d1" onclick="this.style.backgroundColor = localStorage.bgcolor"></div>
            <div id="r2d2" onclick="this.style.backgroundColor = localStorage.bgcolor"></div>    
         </div>
      </div>

      <div id="clear"></div>
</div>

https://jsfiddle.net/0hofvL4j/2/

这是你可以得到的最直接的东西，但不是你能看到的最干净的。

然后，您应该通过将 javascript 放入您的 javascript 文件中进行清理。

推荐阅读