Question

根据点击链接的ID，div的高度和宽度必须根据数组中提到的相应值进行更改

点击链接的ID值正确显示，但框的尺寸不正确。

If语句错误或写入维度的方式是错误的

＆＃13;

function myFunction(values) {
  
    
  var x = document.getElementById(values).id
  document.getElementById("result").innerHTML = x;

 var arr = [
  { id: 1, width: '300px', height: '400px'}, 
  { id: 2, width: '500px', height: '500px'}, 
  { id: 3, width: '100px', height: '100px'}];
  
  for (var i = 0; i<arr.length; i++){
      document.getElementById("results").innerHTML = i;
    if(x==arr[i].id)
      {
    
    document.getElementById("box").style.height = arr[i].height;
    document.getElementById("box").style.width = arr[i].width;
  }
 else{
       document.getElementById("box").innerHTML = "Error in entry";
     } 
  }
  
}

＆＃13;

<a href="#" id="1" onclick="myFunction('1')">July 3, 2013</a>
<a href="#" id="2" onclick="myFunction('2')">July 10, 2013</a>
<a href="#" id="3" onclick="myFunction('3')">July 17, 2013</a>

<div id="result">
</div>
<div id="results">
</div>
<div id="box" style="border:solid 1px red;">
</div>

＆＃13;

Answer 1

如果任何id匹配，否则将运行2次。

否则，它将运行3次所以无论如何错误信息都会存在。

所以，如果你想显示错误信息，请使用flag，如果找到了id，则打破循环;

然后i值保持索引匹配。

试试这段代码。

＆＃13;

function myFunction(values) {
  
    
  var x = document.getElementById(values).id
  document.getElementById("result").innerHTML = x;

 var arr = [
  { id: 1, width: '300px', height: '400px'}, 
  { id: 2, width: '500px', height: '500px'}, 
  { id: 3, width: '100px', height: '100px'}];
  
  for (var i = 0; i<arr.length; i++){
      document.getElementById("results").innerHTML = i;
    if(x==arr[i].id){
        flag=1;
        break;
    }
  }  
  if(flag==1){
    document.getElementById("box").style.height = arr[i].height;
    document.getElementById("box").style.width = arr[i].width;
  }
 else{
       document.getElementById("box").innerHTML = "Error in entry";
     } 
  
}

＆＃13;

<a href="#" id="1" onclick="myFunction('1')">July 3, 2013</a>
<a href="#" id="2" onclick="myFunction('2')">July 10, 2013</a>
<a href="#" id="3" onclick="myFunction('3')">July 17, 2013</a>

<div id="result">
</div>
<div id="results">
</div>
<div id="box" style="border:solid 1px red;">
</div>

＆＃13;

Answer 2

我认为这就是你要找的东西？

删除了else，我使用了一个标志

var arr = [{
    id: 1,
    width: '300px',
    height: '400px'
  },
  {
    id: 2,
    width: '500px',
    height: '500px'
  },
  {
    id: 3,
    width: '100px',
    height: '100px'
  }
];


function myFunction(x) {
  document.getElementById("result").innerHTML = x;
  var found = false, box =  document.getElementById("box");
  for (var i = 0; i < arr.length; i++) {
    if (x == arr[i].id) {
      document.getElementById("results").innerHTML = i;
      found = true;
      box.style.height = arr[i].height;
      box.style.width = arr[i].width;
      // break; // if you only want to look for one
    }
  }
  if (!found) {
    box.innerHTML = "Error in entry";
  }
}

<a href="#" id="1" onclick="myFunction('1')">July 3, 2013</a>
<a href="#" id="2" onclick="myFunction('2')">July 10, 2013</a>
<a href="#" id="3" onclick="myFunction('3')">July 17, 2013</a>
<hr/>
<div id="result">
</div>
<div id="results">
</div>
<div id="box" style="border:solid 1px red;"></div>

Answer 3

我工作正常，我认为你想要实现的是这个

function myFunction(values) {

  var x = document.getElementById(values).id
  document.getElementById("result").innerHTML = x;

  var arr = [{
      id: 1,
      width: '300px',
      height: '400px'
    },
    {
      id: 2,
      width: '500px',
      height: '500px'
    },
    {
      id: 3,
      width: '100px',
      height: '100px'
    }
  ];

  var item = arr.find(function(i) {
    return i.id == x;
  });
  if (item) {
    document.getElementById("box").style.height = item.height;
    document.getElementById("box").style.width = item.width;
  } else {
    document.getElementById("box").innerHTML = "Error in entry";
  }
}

<a href="#" id="1" onclick="myFunction('1')">July 3, 2013</a>
<a href="#" id="2" onclick="myFunction('2')">July 10, 2013</a>
<a href="#" id="3" onclick="myFunction('3')">July 17, 2013</a>

<div id="result">
</div>
<div id="results">
</div>
<div id="box" style="border:solid 1px red;">
</div>

从数组中获取对象的值并将其与id值匹配

3 个答案: