Question

我有两个div，但是具有相同的脚本方法。我想调用一个方法，该方法的div具有display:block。但是在这种情况下，将调用脚本方法，该方法的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)。为了使代码正常工作，您需要对div display: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

我可以通过删除最新的隐藏函数并重新加载活动的html div来解决此问题。实际上，编译器会获得具有相同名称的DOM上最新的JavaScript方法。所以我删除了最新的并在显示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()">

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

3 个答案: