Question

我正在尝试将一个div（通过表单选择）移动到另一个div中。

我无法弄清楚如何将所选div的位置存储到可重用变量中，因为它显然只在本地声明。

变量每次返回undefined，div都不会移动，我得到一个未被捕获的错误。

是否有一种简单的方法来修复此代码以便它可以正常工作？

感谢您的帮助！

var divsArr = [
	document.getElementById("div1"),
	document.getElementById("div2"),
	document.getElementById("div3"),
	document.getElementById("div4"),
	document.getElementById("div5"),
	document.getElementById("div6"),
	document.getElementById("div7"),
	document.getElementById("div8")
];

function identifyDiv() {
	var selectDiv = document.getElementById("exampleOptions").value;
	for (var i = 0; i < divsArr.length; i++) {
		var location = divsArr[i];
		if (selectDiv == divsArr[i].id) {
			break;
		}
	}
}

function moveDiv() {
	identifyDiv();
	alert(location.id); // debug
	location.appendChild(topDiv);
}

<div id="topDiv" style="width: 25px; height: 25px; background-color: orange">
</div>

<br/>

<div style="width: 200px; height: 100px; border-style: solid; border-width: 1px; border-color: black">
	<div id="div1" style="width: 25px; height: 100px; float: left; background-color: blue">
	</div>
	<div id="div2" style="width: 25px; height: 100px; float: left; background-color: lightblue">
	</div>
	<div id="div3" style="width: 25px; height: 100px; float: left; background-color: blue">
	</div>
	<div id="div4" style="width: 25px; height: 100px; float: left; background-color: lightblue">
	</div>
	<div id="div5" style="width: 25px; height: 100px; float: left; background-color: blue">
	</div>
	<div id="div6" style="width: 25px; height: 100px; float: left; background-color: lightblue">
	</div>
	<div id="div7" style="width: 25px; height: 100px; float: left; background-color: blue">
	</div>
	<div id="div8" style="width: 25px; height: 100px; float: left; background-color: lightblue">
	</div>
</div>

<br/>

<form style="width: 40px; float: left">
  <select id="exampleOptions" name="Numbers">
    <option id="example1" value="div1">1</option>
    <option id="example2" value="div2">2</option>
    <option id="example3" value="div3">3</option>
    <option id="example4" value="div4">4</option>
    <option id="example5" value="div5">5</option>
    <option id="example6" value="div6">6</option>
  	<option id="example7" value="div7">7</option>
		<option id="example8" value="div8">8</option>
	</select>
</form>

<button onclick="moveDiv()">Run Script
</button>

Answer 1

问题是location在函数内声明并且是该函数的本地函数。为了能够在您的代码中使用，您需要在外部声明它。我已经更改了变量名，因为location已经是一个全局变量，可能会引起混淆。

var selectedDiv;

var divsArr = [
  document.getElementById("div1"),
  document.getElementById("div2"),
  document.getElementById("div3"),
  document.getElementById("div4"),
  document.getElementById("div5"),
  document.getElementById("div6"),
  document.getElementById("div7"),
  document.getElementById("div8")
];

function identifyDiv() {
  var selectDiv = document.getElementById("exampleOptions").value;
  for (var i = 0; i < divsArr.length; i++) {
    selectedDiv = divsArr[i];
    if (selectDiv == divsArr[i].id) {
      break;
    }
  }
}

function moveDiv() {
  identifyDiv();
  alert(window.selectedDiv.id); // debug
  selectedDiv.appendChild(topDiv);
}

<div id="topDiv" style="width: 25px; height: 25px; background-color: orange">
</div>

<br/>

<div style="width: 200px; height: 100px; border-style: solid; border-width: 1px; border-color: black">
  <div id="div1" style="width: 25px; height: 100px; float: left; background-color: blue">
  </div>
  <div id="div2" style="width: 25px; height: 100px; float: left; background-color: lightblue">
  </div>
  <div id="div3" style="width: 25px; height: 100px; float: left; background-color: blue">
  </div>
  <div id="div4" style="width: 25px; height: 100px; float: left; background-color: lightblue">
  </div>
  <div id="div5" style="width: 25px; height: 100px; float: left; background-color: blue">
  </div>
  <div id="div6" style="width: 25px; height: 100px; float: left; background-color: lightblue">
  </div>
  <div id="div7" style="width: 25px; height: 100px; float: left; background-color: blue">
  </div>
  <div id="div8" style="width: 25px; height: 100px; float: left; background-color: lightblue">
  </div>
</div>

<br/>

<form style="width: 40px; float: left">
  <select id="exampleOptions" name="Numbers">
    <option id="example1" value="div1">1</option>
    <option id="example2" value="div2">2</option>
    <option id="example3" value="div3">3</option>
    <option id="example4" value="div4">4</option>
    <option id="example5" value="div5">5</option>
    <option id="example6" value="div6">6</option>
  	<option id="example7" value="div7">7</option>
		<option id="example8" value="div8">8</option>
	</select>
</form>

<button onclick="moveDiv()">Run Script
</button>

Answer 2

好的，为了保持清洁，我认为使用getElementsByClassName对于＆＃34; group＆＃34;是个好主意。所有元素在一起。这仍然使用你想要的阵列，但是减少了所需的工作以及保持干净。

在每个元素上设置类，其中包含您尝试获取的ID。

然后从这里检查id并进行比较，就像你设置它一样。最后，它将selected变量设置为您想要的所选元素，然后将topDiv附加到

＆＃13;

//Get all the divs in an array
var divsArr = document.getElementsByClassName("divGroup");
var selected;
//alert(divsArr.length);

function identifyDiv() {
  //Get value of the select div
  var selectDiv = document.getElementById("exampleOptions").value;

  //alert(selectDiv);

  for (var i = 0; i < divsArr.length; i++) {
    //var location = divsArr[i];
    if (selectDiv === divsArr[i].id) {
      selected = divsArr[i];
      break;
    }
  }
}

function moveDiv() {
  identifyDiv();

  var topDiv = document.getElementById("topDiv");

  alert(selected.id); // debug
  selected.appendChild(topDiv);
}

＆＃13;

   
  <div id="topDiv" style="width: 25px; height: 25px; background-color: orange">

  </div>

  <br/>

  <div style="width: 200px; height: 100px; border-style: solid; border-width: 1px; border-color: black">
    <div id="div1" class="divGroup" style="width: 25px; height: 100px; float: left; background-color: blue">
    </div>
    <div id="div2" class="divGroup" style="width: 25px; height: 100px; float: left; background-color: lightblue">
    </div>
    <div id="div3" class="divGroup" style="width: 25px; height: 100px; float: left; background-color: blue">
    </div>
    <div id="div4" class="divGroup" style="width: 25px; height: 100px; float: left; background-color: lightblue">
    </div>
    <div id="div5" class="divGroup" style="width: 25px; height: 100px; float: left; background-color: blue">
    </div>
    <div id="div6" class="divGroup" style="width: 25px; height: 100px; float: left; background-color: lightblue">
    </div>
    <div id="div7" class="divGroup" style="width: 25px; height: 100px; float: left; background-color: blue">
    </div>
    <div id="div8" class="divGroup" style="width: 25px; height: 100px; float: left; background-color: lightblue">
    </div>
  </div>

  <br/>

  <form style="width: 40px; float: left">
    <select id="exampleOptions" name="Numbers">
			<option id="example1" value="div1">1</option>
			<option id="example2" value="div2">2</option>
			<option id="example3" value="div3">3</option>
			<option id="example4" value="div4">4</option>
			<option id="example5" value="div5">5</option>
			<option id="example6" value="div6">6</option>
			<option id="example7" value="div7">7</option>
			<option id="example8" value="div8">8</option>
		</select>
  </form>

  <button onclick="moveDiv()">Run Script
	</button>

  <script src="JS/hi.js"></script>

＆＃13;

根据表单选择将div附加到另一个div

2 个答案: