jquery - 如何根据 jquery 中的唯一 ID 将我的 div 映射到链接？

Question

对于这个 html：

<a href="#" id="link-23">User 23</a>
<a href="#" id="link-24">User 24</a>

<div id="user-23">Bob</div>
<div id="user-24">Tim</div>

我试图弄清楚如何编写脚本（使用jquery）来切换点击div#user-23时间的可见性a#link-23？

注意：我在 Rails 中编码，上面的代码是我的脚本的 html 输出。我在脚本中使用迭代器来创建这些 div 和链接。

Answer 1

$('a').click(function(e){
   e.preventDefault();
   var n = this.id.match(/\d+/g).join('');
   $('#user-' + n).toggle(); 
})

http://jsfiddle.net/kEP4d/

Answer 2

使用该 HTML，我建议：

$('a').click(
    function(){
        $('#' + this.id.replace('link', 'user')).toggle();
    });

JS 小提琴演示。

但是，如果您使用该href属性来定位相关元素，您可以只使用 CSS（至少在兼容的浏览器中）：

<a href="#user-23" id="link-23">User 23</a>
<a href="#user-24" id="link-24">User 24</a>

<div id="user-23">Bob</div>
<div id="user-24">Tim</div>​

JS 小提琴演示。

参考：

• :target伪选择器的兼容性信息。
• toggle().

Answer 3

这应该这样做：

$("a[id^='link']").each(function() {
      $(this).click(function() {
          var idnum=$(this).attr("id").replace("link-", "");
          $("div#user-"+idnum).toggle();
      });
  });

JS小提琴