功能更改父类未按预期工作

Question

我需要的是更改元素父级的类。我想将这个元素的id用作字符串，所以我现在可以将这个字符串用作一个类（可能我可以跳过字符串部分）Xo）

元素本身也会被外部事件改变。

我有这个：

＆＃13;

＆＃13;

function show(id) {
	var vBoxy = document.getElementById(id);
	vBoxy.className = "BoxyAfter";

	parentBox = vBoxy.parentNode;
	parentBox.className = vBoxy;
}

＆＃13;

.BoxBefore {
  padding: 20px; 
  background-color: #777;}

.Boxy {
  padding: 20px; 
  background-color: #FF0;}

.BoxyBefore {height: 100px; width: 100px;
  background-color: #DDD;}

.BoxyAfter {height: 100px; width: 100px;
  background-color: #F00;}

＆＃13;

<p onMouseOver="show('Boxy');">Hover me</p>

<div class="BoxBefore">
  <div id="Boxy" class="BoxyBefore">  
  </div>  
</div>

＆＃13;

＆＃13;

＆＃13;

我的想法是我可以将背景的样式更改为黄色。

我缺少什么？

Answer 1

应该是：

parentBox.className = vBoxy.id;

id属性是一个字符串。

Answer 2

如果你希望它获得“Boxy”类，那么

parentBox.className = vBoxy;应该是parentBox.className = vBoxy.id;，因为这就是你如何得到vBoxy的id。 或者更好的解决方案是parentBox.className = id。

function show(id) {
	var vBoxy = document.getElementById(id);
	vBoxy.className = "BoxyAfter";

	parentBox = vBoxy.parentNode;
	parentBox.className = id;
}

.BoxBefore {
  padding: 20px; 
  background-color: #777;}

.Boxy {
  padding: 20px; 
  background-color: #FF0;}

.BoxyBefore {height: 100px; width: 100px;
  background-color: #DDD;}

.BoxyAfter {height: 100px; width: 100px;
  background-color: #F00;}

<p onMouseOver="show('Boxy');">Hover me</p>

<div class="BoxBefore">
  <div id="Boxy" class="BoxyBefore">  
  </div>  
</div>

Answer 3

你刚丢失了.id

＆＃13;

＆＃13;

function show(id) {
	var vBoxy = document.getElementById(id);
	vBoxy.className = "BoxyAfter";

	parentBox = vBoxy.parentNode;
	parentBox.className = vBoxy.id;
}

＆＃13;

.BoxBefore {
  padding: 20px; 
  background-color: #777;}

.Boxy {
  padding: 20px; 
  background-color: #FF0;}

.BoxyBefore {height: 100px; width: 100px;
  background-color: #DDD;}

.BoxyAfter {height: 100px; width: 100px;
  background-color: #F00;}

＆＃13;

<p onMouseOver="show('Boxy');">Hover me</p>

<div class="BoxBefore">
  <div id="Boxy" class="BoxyBefore">  
  </div>  
</div>

＆＃13;

＆＃13;

＆＃13;