來自ID的呼叫功能

Question

我一直在嘗試添加帶有功能的內容。當我點擊錨點時應該添加具有相同錨點ID的內容，我認爲這個邏輯是正確的，但沒有任何事情發生。有沒有更好的方法來解決這個問題。

$('.tab a').click(function(){ 
 
    var tabAnchor = $(this).attr('href'); 
 
    
 
    if($(tabAnchor)=='#info'){ 
 
    callInfo(); 
 
    } 
 
    else if($(tabAnchor)=='#category'){ 
 
    callCategory(); 
 
    } 
 
    
 
}) 
 

 

 
function callInfo(){ 
 
    $('#info').append('<p>Info has been added</p>') 
 
} 
 

 
function callCategory(){ 
 
    $('#info').append('<p>Category has been added</p>') 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="tab"> 
 
    <li><a href=#info>info</a></li> 
 
    <li><a href=#category>category</a></li> 
 
</ul> 
 

 
<div id="info"> 
 

 
</div> 
 

 
<div id="category"> 
 

 
</div>

Answer 1

問題是你if聲明，你比較jQuery對象爲一個字符串 - 這將永遠不會返回true。相反，你應該琴絃直接比較，這樣的：

$('.tab a').click(function() { 
 
    var tabAnchor = $(this).attr('href'); 
 
    if (tabAnchor == '#info') { 
 
    callInfo(); 
 
    } else if (tabAnchor == '#category') { 
 
    callCategory(); 
 
    } 
 
}) 
 

 
function callInfo() { 
 
    $('#info').append('<p>Info has been added</p>') 
 
} 
 

 
function callCategory() { 
 
    $('#info').append('<p>Category has been added</p>') 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="tab"> 
 
    <li><a href="#info">info</a></li> 
 
    <li><a href="#category">category</a></li> 
 
</ul> 
 

 
<div id="info"></div> 
 
<div id="category"></div>

另外請注意，您可以進行邏輯更簡單，更易於維護由具有執行基於邏輯的單一功能點擊的href：

$('.tab a').click(function() { 
 
    var tabAnchor = $(this).attr('href'); 
 
    $(tabAnchor).append('<p>' + tabAnchor.substring(1) + ' has been added</p>') 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="tab"> 
 
    <li><a href="#info">info</a></li> 
 
    <li><a href="#category">category</a></li> 
 
</ul> 
 

 
<div id="info"></div> 
 
<div id="category"></div>