两个同名函数，我想调用div处于活动状态的函数

Question

我有两个div，但有相同的脚本方法。我想调用一个方法，div有display:block。但是在这种情况下，调用了script方法，div具有display:none。

function Callme() {
sameName();
}

<div class="1" style="display:block">
div 1
<script>
function sameName() {
alert("1")
//some code
}
</script>
</div>
<div class="2" style="display:none">
div 2
<script>
function sameName() {
//some code
alert(2)
}
</script>
</div>
<input type="button" value="clickMe" onclick="Callme()">

Answer 1

它会提醒您2，因为当函数或变量具有相同名称时，javascript运行时会覆盖以前的声明，并考虑该函数或变量的最后一个声明。在您的情况下，最后一次申报是

function sameName(){
//some code
alert(2)
}

因此，这个函数sameName()被认为具有alert(2)。为了使代码正常工作，您需要在divdisplay:block上进行检查，或者不在函数内部进行检查，并相应地设置条件，如：

function Callme(){
sameName();
}
function sameName(){
let display1 = document.getElementsByClassName('1')[0].style.display;
if(display1 === 'block' ){
alert(1);
}
let display2 = document.getElementsByClassName('2')[0].style.display;
if(display2 === 'block' ){
alert(2);
}
}

<div class="1" style="display:block">
div 1
</div>
<div class="2" style="display:none">
div 2
</div>
<input type="button" value="clickMe" onclick="Callme()">

Answer 2

重命名函数，因为您将覆盖它(第一个声明的执行上下文在第二个脚本标记之间被覆盖(

Answer 3

我可以通过删除最新的函数方法来解决这个问题，该方法是隐藏并重新加载活动的htmldiv。实际上，编译器得到的JavaScript方法是DOM上最新的具有相同名称的方法。因此，我删除了最新的显示div，并渲染了具有JavaScript功能的html。

function Callme() {
$(".2").html("")
var html1= $(".1").html();
$(".1").html(html1);
sameName();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="1" style="display:block">
div 1
<script>
function sameName() {
alert("1")
//some code
}
</script>
</div>
<div class="2" style="display:none">
div 2
<script>
function sameName() {
//some code
alert(2)
}
</script>
</div>
<input type="button" value="clickMe" onclick="Callme()">