Javascript 开关无法正常工作

Question

我正在尝试制作一个单页纸，在其左侧将有一个固定的 div 并且在这个 div 中将是一个图像。

图片会被鼠标悬停在div的id改变。

我写了这个函数：

var number ='number';
document.onmouseover = function(obj) {
    console.log(obj.target.id);

    switch (obj.target.id) {

        case 1:
            var number = "a";
            break;
        case 2:
            var number = "b";
            break;
        case 3:
            var number = "c";
            break;
        case 4:
            var number = "d";
            break;
        case 5:
            var number = "e";
            break;
        case 6:
            var number = "f";
            break;
    }

    document.getElementById("numberdiv").innerHTML = "this div id is " + number;
}

我有一个主要问题，交换机没有收到来自 obj.target.id 的数据。

这是我的HTML

<div class="div" id="1">1</div>
<div class="div" id="2">2</div>
<div class="div" id="3">3</div>
<div class="div" id="4">4</div>
<div class="div" id="5">5</div>
<div class="div" id="6">6</div>
<div id="numberdiv"></div>

JSFIDDLE

Answer 1

您需要解析 parseInt(obj.target.id,10) 或将 case 1 转换为 case "1"，因为 obj.target.id 是字符串，它不会匹配任何大小写，因此您需要转换将值切换为数字或将大小写值切换为字符串。

var number = 'number';
document.onmouseover = function(obj) {
  console.log(obj.target.id);

  switch (parseInt(obj.target.id, 10)) {

    case 1:
      var number = "a";
      break;
    case 2:
      var number = "b";
      break;
    case 3:
      var number = "c";
      break;
    case 4:
      var number = "d";
      break;
    case 5:
      var number = "e";
      break;
    case 6:
      var number = "f";
      break;
  }

  document.getElementById("numberdiv").innerHTML = "this div id is " + number;
}

.div {
  height: 200px;
}
body:nth-child(odd) {
  background-color: blue;
}
body:nth-child(even) {
  background-color: green;
}
#numberdiv {
  position: fixed;
  top: 50%;
  float: right;
  background-color: aqua;
}

<body>
  <div class="div" id="1">1</div>
  <div class="div" id="2">2</div>
  <div class="div" id="3">3</div>
  <div class="div" id="4">4</div>
  <div class="div" id="5">5</div>
  <div class="div" id="6">6</div>
  <div id="numberdiv"></div>
</body>

或者

var number = 'number';
document.onmouseover = function(obj) {
  console.log(obj.target.id);

  switch (obj.target.id) {

    case "1":
      var number = "a";
      break;
    case "2":
      var number = "b";
      break;
    case "3":
      var number = "c";
      break;
    case "4":
      var number = "d";
      break;
    case "5":
      var number = "e";
      break;
    case "6":
      var number = "f";
      break;
  }

  document.getElementById("numberdiv").innerHTML = "this div id is " + number;
}

.div {
  height: 200px;
}
body:nth-child(odd) {
  background-color: blue;
}
body:nth-child(even) {
  background-color: green;
}
#numberdiv {
  position: fixed;
  top: 50%;
  float: right;
  background-color: aqua;
}

<body>
  <div class="div" id="1">1</div>
  <div class="div" id="2">2</div>
  <div class="div" id="3">3</div>
  <div class="div" id="4">4</div>
  <div class="div" id="5">5</div>
  <div class="div" id="6">6</div>
  <div id="numberdiv"></div>
</body>

Answer 2

从 DOM 读取的任何内容都是 String。 switch cases 不会强制类型匹配特定的 case。使用 parseInt(obj.target.id, 10).

Updated Fiddle

更好的方法是使用对象而不是 switch。

var number;

var numbers = {
    1: 'a',
    2: 'b',
    3: 'c',
    4: 'd',
    5: 'e',
    6: 'f'
};
document.onmouseover = function (obj) {
    var number = numbers[obj.target.id];
    document.getElementById("numberdiv").innerHTML = "this div id is " + number;
}

var number;

var numbers = {
  1: 'a',
  2: 'b',
  3: 'c',
  4: 'd',
  5: 'e',
  6: 'f'
};

document.onmouseover = function(obj) {
  var number = numbers[obj.target.id];
  document.getElementById("numberdiv").innerHTML = "this div id is " + number;
}

.div {
  height: 200px;
}
body:nth-child(odd) {
  background-color: blue;
}
body:nth-child(even) {
  background-color: green;
}
#numberdiv {
  position: fixed;
  top: 50%;
  float: right;
  background-color: aqua;
}

<body>
  <div class="div" id="1">1</div>
  <div class="div" id="2">2</div>
  <div class="div" id="3">3</div>
  <div class="div" id="4">4</div>
  <div class="div" id="5">5</div>
  <div class="div" id="6">6</div>
  <div id="numberdiv"></div>
</body>

或者数组，如果数字是连续的

var number;
var numbers = [undefined, 'a', 'b', 'c', 'd', 'e', 'f'];

document.onmouseover = function (obj) {
    var number = numbers[obj.target.id];
    document.getElementById("numberdiv").innerHTML = "this div id is " + number;
}

var number;
var numbers = [undefined, 'a', 'b', 'c', 'd', 'e', 'f'];

document.onmouseover = function(obj) {
  var number = numbers[obj.target.id];
  document.getElementById("numberdiv").innerHTML = "this div id is " + number;
}

.div {
  height: 200px;
}
body:nth-child(odd) {
  background-color: blue;
}
body:nth-child(even) {
  background-color: green;
}
#numberdiv {
  position: fixed;
  top: 50%;
  float: right;
  background-color: aqua;
}

<body>
  <div class="div" id="1">1</div>
  <div class="div" id="2">2</div>
  <div class="div" id="3">3</div>
  <div class="div" id="4">4</div>
  <div class="div" id="5">5</div>
  <div class="div" id="6">6</div>
  <div id="numberdiv"></div>
</body>

Javascript 开关无法正常工作

Javascript switch dosen't work correctly

javascript

innerhtml

switch-statement