为什么会坏掉：

Question

以下功能在我页面的head标签中定义。

<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属性期望函数在全局范围内公开。

因为您已在greenTab函数中定义了ready，所以它在该函数的范围内定义，而不是在全局范围内定义，因此无法在全局范围内找到它。

如何修复它：

或者：

全球曝光。（不要这样做）
通过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');
});

您也需要对第二个单击处理程序执行相同的操作。

定义的函数是“未定义”

1 个答案:

为什么会坏掉：

如何修复它：