javascript - showDiv 函数 js 的小错误

Question

我需要一些帮助来解决 javascript 的一个小错误。我是 js 菜鸟，所以我不知道该怎么做......

我想通过点击不同的按钮在同一页面上显示不同的内容。 我使用了 showDiv() 函数，但所有按钮都使用相同的函数，所以它不起作用，我不知道如何为每个按钮分配一个函数。

这是我的代码:https://codepen.io/pjberot/pen/RyOJBO

function showDiv() {
document.getElementById('txt1').style.display = "block";
document.getElementById('nxt1').style.display = "inline";
}

function showDiv() {
document.getElementById('txt2').style.display = "block";
document.getElementById('nxt2').style.display = "inline";
}

function showDiv() {
document.getElementById('txt3').style.display = "block";
document.getElementById('nxt3').style.display = "inline";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="button" name="answer" value="BOUTON 1" onclick="showDiv()" class="btninfo" /><div id="txt1"  style="display:none;" class="answer_list slideDown" >
<br>
Le texte 1 ici
</div>
<div class="nxt" id="nxt1" style="display:none;"> NEXT (1) </div> 

<input type="button" name="answer" value="BOUTON 2" onclick="showDiv()" class="btninfo" /><div id="txt2"  style="display:none;" class="answer_list slideDown" >
<br>
Le texte 2 ici
</div>
<div class="nxt" id="nxt2" style="display:none;"> NEXT (2) </div> 

<input type="button" name="answer" value="BOUTON 3" onclick="showDiv()" class="btninfo" /><div id="txt3"  style="display:none;" class="answer_list slideDown" >
<br>
Le texte 3 ici
</div>
<div class="nxt" id="nxt3" style="display:none;"> NEXT (3) </div> 

非常感谢您的帮助!

Answer 1

当您声明多个具有相同名称的函数时，您会用新的声明覆盖之前的声明。所以当你声明 showDiv 三次时，只有最后一个有效:)

最简单(尽管不是最干净)的方法是为您的函数指定不同的名称:

function showDiv1() {
document.getElementById('txt1').style.display = "block";
document.getElementById('nxt1').style.display = "inline";
}

function showDiv2() {
document.getElementById('txt2').style.display = "block";
document.getElementById('nxt2').style.display = "inline";
}

function showDiv3() {
document.getElementById('txt3').style.display = "block";
document.getElementById('nxt3').style.display = "inline";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="button" name="answer" value="BOUTON 1" onclick="showDiv1()" class="btninfo" /><div id="txt1"  style="display:none;" class="answer_list slideDown" >
<br>
Le texte 1 ici
</div>
<div class="nxt" id="nxt1" style="display:none;"> NEXT (1) </div> 

<input type="button" name="answer" value="BOUTON 2" onclick="showDiv2()" class="btninfo" /><div id="txt2"  style="display:none;" class="answer_list slideDown" >
<br>
Le texte 2 ici
</div>
<div class="nxt" id="nxt2" style="display:none;"> NEXT (2) </div> 

<input type="button" name="answer" value="BOUTON 3" onclick="showDiv3()" class="btninfo" /><div id="txt3"  style="display:none;" class="answer_list slideDown" >
<br>
Le texte 3 ici
</div>
<div class="nxt" id="nxt3" style="display:none;"> NEXT (3) </div>

由于函数在本质上非常相似，您或许可以通过使用函数参数使其更简洁一些

function showDiv(blockId, inlineId) {
document.getElementById(blockId).style.display = "block";
document.getElementById(inlineId).style.display = "inline";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="button" name="answer" value="BOUTON 1" onclick="showDiv('txt1','nxt1')" class="btninfo" /><div id="txt1"  style="display:none;" class="answer_list slideDown" >
<br>
Le texte 1 ici
</div>
<div class="nxt" id="nxt1" style="display:none;"> NEXT (1) </div> 

<input type="button" name="answer" value="BOUTON 2" onclick="showDiv('txt2','nxt2')" class="btninfo" /><div id="txt2"  style="display:none;" class="answer_list slideDown" >
<br>
Le texte 2 ici
</div>
<div class="nxt" id="nxt2" style="display:none;"> NEXT (2) </div> 

<input type="button" name="answer" value="BOUTON 3" onclick="showDiv('txt3','nxt3')" class="btninfo" /><div id="txt3"  style="display:none;" class="answer_list slideDown" >
<br>
Le texte 3 ici
</div>
<div class="nxt" id="nxt3" style="display:none;"> NEXT (3) </div>

在 Javascript 中还有其他更好的处理事件(如点击)的方法。我建议阅读 Introduction to Events MDN 上的页面以获得对此的良好概述。