来自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>