定义的函数"Not defined"

Question

下面的函数是在我的页面的头部标签中定义的。

<script type="text/javascript">     
$(document).ready(function(){
function greenTab(input){
    if ($input === 'second') {
        $('#green').css({'display':'none'});
        $('#2ndgreen').css({'display':'initial'});
    } else if ($input === 'first') {
        $('#2ndgreen').css({'display':'none'});
        $('#green').css({'display':'initial'});
    }
}   
});
</script>

我这样称呼它:

<div class="container">
    <ul class="nav nav-pills">
        <li class="active" onclick="greenTab('first')"><a>1st Green</a></li>
        <li class="active" onclick="greenTab('second')"><a>2nd Green</a></li>                         
    </ul>
</div>

问题:Firebug说函数没有定义。期望结果:对于要定义的函数

Answer 1

为什么坏了:

onclick属性期望函数在全局范围内公开。

由于您在ready函数中定义了greenTab，因此它是在该函数的作用域中定义的，而不是在全局作用域中，因此在全局作用域中找不到它。

如何修复:

:

1. 全局暴露它。(不要这样做)
2. 通过JS添加事件监听器，而不是HTML(可能会这样做)

因为你正在使用jQuery，你应该像这样添加你的事件处理程序:

$('some selector').click(function () {
    greenTab('first');
});

一些选择器现在应该是'.container ul li:nth-of-type(1)'，但我建议在这些元素上添加一些东西来更好地选择它们，例如:

<div class="container">
    <ul class="nav nav-pills">
        <li class="active first-green"><a>1st Green</a></li>
        <li class="active second-green"><a>2nd Green</a></li>                         
    </ul>
</div>

你的第一个选择器应该是:

$('.first-green').click(function () {
    greenTab('first');
});

对于第二个单击处理程序也需要这样做。