Question

我试图制作一个单页面，在它的左边会有一个固定的div，在这个div中将是一个图像。

图像将被鼠标所在的div的id改变。

我写了这个函数：

#1
user.product.try(:some_methods) 
#2
user.product.some_method if user.product.present?

我有一个主要问题，交换机无法接收来自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; }的数据。

这是我的HTML

obj.target.id

JSFIDDLE

Answer 1

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

＆＃13;

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;
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

<小时/> OR

＆＃13;

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;
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

从DOM读取的任何内容都是字符串。 switch个案例并未强制执行此类型以匹配特定案例。使用parseInt(obj.target.id, 10)。

Updated Fiddle

更好的方法是使用Object而不是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;
}

＆＃13;

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;
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Or Array，如果数字是连续的

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;
}

＆＃13;

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;
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Javascript开关无法正常工作

2 个答案: