在 HTML 页面上有效但在另一个页面上无效的函数

A function that works on an HTML page but not on the other one

我对下面的代码片段有疑问:当我按下第一页上的按钮时,一切正常。但它告诉我,当我按下第二页上的按钮时,“secondPageItems”没有定义。 (这里一切正常,因为它在同一个 HTML 页面上)

更奇怪的是,如果我在我的 JS sheet 上将“secondPageItems”和“secondPageHiden”放在“firstPageItems”和“firstPageHiden”之上,第一页上的按钮不起作用,但是第二页工作正常:(

let firstPageItems = ["radioA", "radioB"];
let firstPageHiden = [hidenItemA1, hidenItemB1];
let secondPageItems = ["radioC", "radioD"];
let secondPageHiden = [hidenItemC1, hidenItemD1];

function Show(x) {
  $(x).slideDown("fast");
}
function Hide(x) {
  $(x).slideUp("fast");
}

function controlFn(a, b) {
    document.getElementById(a+b).checked = true;
}

function control1(x, y) {
  let z = "1";
  for (i = 0; i < x.length; i++) {
    controlFn(x[i], z);
    Show(y[i]);
  }
 }
function control2(x, y) {
  let z = "2";
  for (i = 0; i < x.length; i++) {
    controlFn(x[i], z);
    Hide(y[i]);
  }
}
function control3(x, y) {
  let z = "3";
  for (i = 0; i < x.length; i++) {
    controlFn(x[i], z);
    Hide(y[i]);
  }
}
.hidenItem {
  display: none;
}
<!-- First page: -->
<div>
  <span>Control :</span>
  <input id="controlItemAB1" type="button" onclick="control1(firstPageItems, firstPageHiden)" value="Items x1" />
  <input id="controlItemAB2" type="button" onclick="control2(firstPageItems, firstPageHiden)" value="Items x2"/>
  <input id="controlItemAB3" type="button" onclick="control3(firstPageItems, firstPageHiden)" value="Items x3"/>
</div>
<div>
  <input id="radioA1" name="itemA" type="radio" onchange="Show(hidenItemA1)" />
  <label for="radioA1">This is Item A1</label>
  <input id="radioA2" name="itemA" type="radio" onchange="Hide(hidenItemA1)" />
  <label for="radioA2">This is Item A2</label>
  <input id="radioA3" name="itemA" type="radio" checked="checked" onchange="Hide(hidenItemA1)" />
  <label for="radioA3">This is Item A3</label>
</div>
<div id="hidenItemA1" class="hidenItem"> This is shown only when Item A1 is checked</div>
<div>
  <input id="radioB1" name="itemB" type="radio" onchange="Show(hidenItemB1)" />
  <label for="radioB1">This is Item B1</label>
  <input id="radioB2" name="itemB" type="radio" onchange="Hide(hidenItemB1)" />
  <label for="radioB2">This is Item B2</label>
  <input id="radioB3" name="itemB" type="radio" onchange="Hide(hidenItemB1)" checked="checked" />
  <label for="radioB3">This is Item B3</label>
</div>
<div id="hidenItemB1" class="hidenItem"> This is shown only when Item B1 is checked</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p/>
<p/>

<!-- Second page: -->
<div>
  <span>Control :</span>
  <input id="controlItemCD1" type="button" onclick="control1(secondPageItems, secondPageHiden)" value="Items x1" />
  <input id="controlItemCD2" type="button" onclick="control2(secondPageItems, secondPageHiden)" value="Items x2"/>
  <input id="controlItemCD3" type="button" onclick="control3(secondPageItems, secondPageHiden)" value="Items x3"/>
</div>
<div>
  <input id="radioC1" name="itemC" type="radio" onchange="Show(hidenItemC1)"/>
  <label for="radioC1">This is Item C1</label>
  <input id="radioC2" name="itemC" type="radio" onchange="Hide(hidenItemC1)"/>
  <label for="radioC2">This is Item C2</label>
  <input id="radioC3" name="itemC" type="radio" checked="checked" onchange="Hide(hidenItemC1)"/>
  <label for="radioC3">This is Item C3</label>
</div>
<div id="hidenItemC1" class="hidenItem"> This is shown only when Item C1 is checked</div>
<div>
  <input id="radioD1" name="itemD" type="radio" onchange="Show(hidenItemD1)"/>
  <label for="radioD1">This is Item D1</label>
  <input id="radioD2" name="itemD" type="radio" onchange="Hide(hidenItemD1)"/>
  <label for="radioD2">This is Item D2</label>
  <input id="radioD3" name="itemD" type="radio" checked="checked" onchange="Hide(hidenItemD1)"/>
  <label for="radioD3">This is Item D3</label>
</div>
<div id="hidenItemD1" class="hidenItem"> This is shown only when Item D1 is checked</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

好的,所以我找到了问题。

我不知道为什么,可能 jQuery 出了什么问题,但是当我更改

function Show(x) {
$(x).slideDown("fast");
}

进入:

function Show(x) {
$("#"+x).slideDown("fast");
}

(隐藏(x)也一样)。

然后我为我的 hidenItemA1 添加了一些“”,...,它解决了我的问题:)

所以最终代码将是:

let firstPageItems = ["radioA", "radioB"];
let firstPageHiden = ["hidenItemA1", "hidenItemB1"];
let secondPageItems = ["radioC", "radioD"];
let secondPageHiden = ["hidenItemC1", "hidenItemD1"];

function Show(x) {
  $("#"+x).slideDown("fast");
}
function Hide(x) {
  $("#"+x).slideUp("fast");
}

function controlFn(a, b) {
    document.getElementById(a+b).checked = true;
}

function control1(x, y) {
  let z = "1";
  for (i = 0; i < x.length; i++) {
    controlFn(x[i], z);
    Show(y[i]);
  }
 }
function control2(x, y) {
  let z = "2";
  for (i = 0; i < x.length; i++) {
    controlFn(x[i], z);
    Hide(y[i]);
  }
}
function control3(x, y) {
  let z = "3";
  for (i = 0; i < x.length; i++) {
    controlFn(x[i], z);
    Hide(y[i]);
  }
}
.hidenItem{
 display:none;
}
<!-- First page: -->
<div>
  <span>Control :</span>
  <input id="controlItemAB1" type="button" onclick="control1(firstPageItems, firstPageHiden)" value="Items x1" />
  <input id="controlItemAB2" type="button" onclick="control2(firstPageItems, firstPageHiden)" value="Items x2"/>
  <input id="controlItemAB3" type="button" onclick="control3(firstPageItems, firstPageHiden)" value="Items x3"/>
</div>
<div>
  <input id="radioA1" name="itemA" type="radio" onchange="Show(hidenItemA1)" />
  <label for="radioA1">This is Item A1</label>
  <input id="radioA2" name="itemA" type="radio" onchange="Hide(hidenItemA1)" />
  <label for="radioA2">This is Item A2</label>
  <input id="radioA3" name="itemA" type="radio" checked="checked" onchange="Hide(hidenItemA1)" />
  <label for="radioA3">This is Item A3</label>
</div>
<div id="hidenItemA1" class="hidenItem"> This is shown only when Item A1 is checked</div>
<div>
  <input id="radioB1" name="itemB" type="radio" onchange="Show(hidenItemB1)" />
  <label for="radioB1">This is Item B1</label>
  <input id="radioB2" name="itemB" type="radio" onchange="Hide(hidenItemB1)" />
  <label for="radioB2">This is Item B2</label>
  <input id="radioB3" name="itemB" type="radio" onchange="Hide(hidenItemB1)" checked="checked" />
  <label for="radioB3">This is Item B3</label>
</div>
<div id="hidenItemB1" class="hidenItem"> This is shown only when Item B1 is checked</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p/>
<p/>

<!-- Second page: -->
<div>
  <span>Control :</span>
  <input id="controlItemCD1" type="button" onclick="control1(secondPageItems, secondPageHiden)" value="Items x1" />
  <input id="controlItemCD2" type="button" onclick="control2(secondPageItems, secondPageHiden)" value="Items x2"/>
  <input id="controlItemCD3" type="button" onclick="control3(secondPageItems, secondPageHiden)" value="Items x3"/>
</div>
<div>
  <input id="radioC1" name="itemC" type="radio" onchange="Show(hidenItemC1)"/>
  <label for="radioC1">This is Item C1</label>
  <input id="radioC2" name="itemC" type="radio" onchange="Hide(hidenItemC1)"/>
  <label for="radioC2">This is Item C2</label>
  <input id="radioC3" name="itemC" type="radio" checked="checked" onchange="Hide(hidenItemC1)"/>
  <label for="radioC3">This is Item C3</label>
</div>
<div id="hidenItemC1" class="hidenItem"> This is shown only when Item C1 is checked</div>
<div>
  <input id="radioD1" name="itemD" type="radio" onchange="Show(hidenItemD1)"/>
  <label for="radioD1">This is Item D1</label>
  <input id="radioD2" name="itemD" type="radio" onchange="Hide(hidenItemD1)"/>
  <label for="radioD2">This is Item D2</label>
  <input id="radioD3" name="itemD" type="radio" checked="checked" onchange="Hide(hidenItemD1)"/>
  <label for="radioD3">This is Item D3</label>
</div>
<div id="hidenItemD1" class="hidenItem"> This is shown only when Item D1 is checked</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>