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

问题是你的$('.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>') }语句，你将jQuery对象与字符串进行比较 - 这永远不会返回true。相反，您应该直接比较字符串，如下所示：

＆＃13;

＆＃13;

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

＆＃13;

href

＆＃13;

＆＃13;

＆＃13;

另请注意，通过使用单个函数执行基于所单击的$('.tab a').click(function() { var tabAnchor = $(this).attr('href'); $(tabAnchor).append('<p>' + tabAnchor.substring(1) + ' has been added</p>') });的逻辑，可以使逻辑更简单，更易于维护：

＆＃13;

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;