javascript - jquery 函数不会使用输入变量

Question

所以我在一个 div 上有一个按钮，它应该使相应的页面在单击时淡出，而另一个页面淡入（page2，设置为 display:none）。我的脚本将无法正常工作。谁能帮我解决这个问题？

<div>
    <div id="page1">
       <button onclick="fade(page1,page2)"></button>
    </div>
    <div id="page2"></div>
</div>

<script type="text/javascript">
function fade(out_ID, in_ID){
    $("#"+out_ID).fadeOut(1000);
    $("#"+in_ID).delay(1000).fadeIn(1000);
}
</script>

Answer 1

试试这个：只需要为参数添加引号。

<button onclick="fade('page1','page2')"></button>

Answer 2

您应该重写以完全使用 jquery 并删除内联 javascript：

<div>
    <div id="page1">
       <button id="myButton"></button>
    </div>
    <div id="page2"></div>
</div>

<script type="text/javascript">
    // wait for page to load
    $(function () {
      $('#myButton').click(function(){
         fade($('#page1'), $('#page2'));
      });
    });

    function fade(out_ID, in_ID){
        out_ID.fadeOut(1000);
        in_ID.delay(1000).fadeIn(1000);
    }
</script>

那应该可以解决您的问题。