定義的功能為“未定義”

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屬性期望函數在全局范圍內公開。

因為您已經在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');
});

您還需要對第二個單擊處理程序執行相同的操作。