一个在HTML页面上工作但在另一个页面上不工作的函数

Question

我对下面的片段有一个问题：当我按下第一页上的按钮时，一切都很正常。但它告诉我；secondPageItems"；当我按下第2页上的按钮时，没有定义。(这里每件事都很好，因为它在同一个HTML页面上(

即使是陌生人，如果我把"；secondPageItems"；以及"；secondPageHiden"；以上"；firstPageItems"；以及"；firstPageHiden"；在我的JS表上，第一页的按钮不起作用，但第二页的按钮起作用很好：(

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>

Answer 1

好的，所以我发现了问题。

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

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

进入：

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

(Hide(x(也是如此(。

我加了一些"对于我的隐藏项目A1，它解决了我的问题：(

所以最后的代码是：

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>