切换颜色声明 -答案

【问题标题】：Switch color statement -切换颜色声明 -
【发布时间】：2018-04-27 07:48:20
【问题描述】：

我希望为我的拖动功能创建一个 switch 语句。基本上希望能够单击下面提到的四个按钮之一并将拖动和颜色功能切换为按钮的颜色。

更新，我现在已经解决了这个问题 27/04

08:00-16:30 08:30-17:00 09:00-17:30 09:30-18:00 集合

  <script>
var box;
var boxArray;
var backgroundColor;
var text;
boxArray = [];

box = document.getElementsByClassName("sidebar");
for ( var i = 0; i < box.length; i++ ) (function(i){
box[i].onmousemove = function(e) {
if(e.buttons == 1)
box[i].style.backgroundColor = backgroundColor, box[i].innerHTML = text, box[i].style.fontSize = "10px", box[i].style.padding = "4px";
}
})(i);

document.addEventListener("contextmenu", function (e) {
e.preventDefault();
}, false);



function changeColor(color){
  switch(color) {
    case 'o' :
      backgroundColor = "orange";
      text = "08:00-16:30";
      break;
    case 'r' :
      backgroundColor = "red";
      text ="08:30-17:00";
      break;
    case 'g' :
      backgroundColor = "green";
      text ="09:00-17:30";
      break;
    case 'p' :
      backgroundColor = "purple";
      text ="09:00-17:30";
    }
  }

【问题讨论】：

标签： javascript colors switch-statement drag

【解决方案1】：

您的 switch 语句在语法上不正确。您需要提供一个参数来比较您的 switch 案例，并且在 switch 语句中，不要使用花括号。

类似这样的：

switch (color) {
   case "o":
     backgroundColor = "orange";
     break;
   case "r":
     backgroundColor = "red";
     break;
   case "g":
     backgroundColor = "green";
     break;
   case "p":
     backgroundColor = "purple";
     break;
}

请注意，“o”、“r”、“g”和“p”在引号中，这是因为它们是字符串值，如果您省略引号，就像您在代码示例中所做的那样，JavaScript 会将它们解释为变量，这只是未定义的。

【讨论】：

祝你好运。老实说，您在代码中还犯了一些其他错误，在我的回答中无法解决。对于初学者，按钮中的 onclick 属性需要这样写：onclick="changeColor('o')"，changeColor 是您在单击按钮时调用的函数的名称，'o' 是您提供的参数，即颜色代码
您好，我已经解决了，感谢您的评论和帮助 -

【解决方案2】：

我自己刚刚解决了这个问题 -

      <script>
    var box;
    var boxArray;
    var backgroundColor;
    var text;
    boxArray = [];

    box = document.getElementsByClassName("sidebar");
    for ( var i = 0; i < box.length; i++ ) (function(i){
    box[i].onmousemove = function(e) {
    if(e.buttons == 1)
    box[i].style.backgroundColor = backgroundColor, box[i].innerHTML = text, box[i].style.fontSize = "10px", box[i].style.padding = "4px";
    }
    })(i);

    document.addEventListener("contextmenu", function (e) {
    e.preventDefault();
    }, false);



    function changeColor(color){
      switch(color) {
        case 'o' :
          backgroundColor = "orange";
          text = "08:00-16:30";
          break;
        case 'r' :
          backgroundColor = "red";
          text ="08:30-17:00";
          break;
        case 'g' :
          backgroundColor = "green";
          text ="09:00-17:30";
          break;
        case 'p' :
          backgroundColor = "purple";
          text ="09:00-17:30";
        }
      }



      </script>

【讨论】：