javascript - 单选按钮 onclick 将 div 带到最高 zindex

Question

背景:

所以...第一次使用单选按钮触发 onclick javascript 函数。

我有一组单选按钮(名称='div_select')，我试图将每个按钮与特定的div('beginner1'，'beginner2'等)配对。当选择单选按钮时，我尝试通过 onclick 将配对 div 的 zIndex 设置为最高。

每个配对的 div 均通过 CSS 进行格式化，以便它们都位于完全相同的位置(#beginner1、#beginner2、#adept1 等。{})。

此时，我尝试为每个配对进行不同的 onclick。

<小时/>

问题:

我没有运气改变 zindex 将 div 带到前台。

<小时/>

问题:

由于我对 html/javascript 领域相当陌生，因此相当笼统的问题是“我哪里出错了？”

我已经阅读了几篇文章(例如 bring div element to front with zIndex 和 set zIndex onclick )，试图自己取得一些进展，但我觉得我在这些语言方面的技能非常有限，以至于我完全不知所措了解要使用哪些标签。

<小时/>

有问题的代码

function highest_index() {
  var highest_index
  highest_index = highest_index +
}

function beg1() {
  document.getElementByID('beginner1').style.zIndex = highest_index;
}

function adt1() {
  document.getElementByID('adept1').style.zIndex = highest_index;
}

<form>
  <!-- 
				DOCK ON LEFT			
			-->
  <div id="dok">
    <div style="left: 0; width:100%;">
      <p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
        Beginner
      </p>
      <input type="radio" name="div_select" onclick="beg1()" />Video<br/>
      <hr/>
      <p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
        Adept
      </p>
      <input type="radio" name="div_select" onclick="adt1()" />Video<br/>
      <hr/>
    </div>
  </div>
  <!-- 
				OVERLAY BODY SECTIONS	
			-->
  <div id="beginner1">
    <table>
      <tr>
        <td style="font-weight: bold; font-size: 20px; text-align: left; width: 80%;">Label for Table</td>
      </tr>
    </table>
  </div>
  <div id="adept1">
    <table>
      <tr>
        <td>second div intended to test </td>
      </tr>
    </table>
  </div>
</form>

<小时/>

根据评论部分编辑为 javascript:

var highest_index = highest_index++;
}
function beg1() {
   document.getElementByID('beginner1').style.zIndex = highest_index();
}
function adt1() {
   document.getElementByID('adept1').style.zIndex = highest_index();
}

Answer 1

这里存在很多问题，但我将单独解决它们。

1. 您的 highest_index 变量应全局声明，以便每次调用函数时不会重置它。

2. 同一作用域内同名的变量和函数会导致冲突。更改其中一个的名称。

3. highest_index+ 应为 highest_index++，或者如果您想同时返回结果，您可以使用 ++highest_index (两者都会递增 highest_index，但 var++ 返回递增之前的值，而 ++var 返回递增后的值。

4. 正如第 3 点所指出的，您希望返回更新后的highest_index，以便您可以使用它。

5. getElementByID 不是函数(JS 区分大小写!)。将 ID 更改为 Id。

随意删除我添加的console.log()；它们仅用于演示目的。

我已在下面的代码中添加了注释，以按数字突出显示上面的更改。

var highest_index = 0;        //1. Highest index declared globally

function getHighestIndex() {  //2. Function renamed
  return ++highest_index;     //3 & 4. Increment and return
}

//5. GetElementByID changed to GetElementById
function beg1() {
  document.getElementById('beginner1').style.zIndex = getHighestIndex();
  console.log(`The z-index of beginner1 is ${document.getElementById('beginner1').style.zIndex}`);
}

//5. GetElementByID changed to GetElementById
function adt1() {
  document.getElementById('adept1').style.zIndex = getHighestIndex();
  console.log(`The z-index of adept1 is ${document.getElementById('adept1').style.zIndex}`);
}

<form>
  <!-- 
				DOCK ON LEFT			
			-->
  <div id="dok">
    <div style="left: 0; width:100%;">
      <p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
        Beginner
      </p>
      <input type="radio" name="div_select" onclick="beg1()" />Video<br/>
      <hr/>
      <p style="font-size: 12px; padding: 0%,1%,0%,0%; font-weight: bold;">
        Adept
      </p>
      <input type="radio" name="div_select" onclick="adt1()" />Video<br/>
      <hr/>
    </div>
  </div>
  <!-- 
				OVERLAY BODY SECTIONS	
			-->
  <div id="beginner1">
    <table>
      <tr>
        <td style="font-weight: bold; font-size: 20px; text-align: left; width: 80%;">Label for Table</td>
      </tr>
    </table>
  </div>
  <div id="adept1">
    <table>
      <tr>
        <td>second div intended to test </td>
      </tr>
    </table>
  </div>
</form>