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

問題は、文字列にjQueryオブジェクトを比較し、あなたのif文です - これが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>