如何根据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 Fiddle demo

但是，如果使用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 Fiddle demo

参考文献：

• Compatibility information for :target pseudo-selector。
• toggle()。

Answer 3

这应该这样做：

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

JS Fiddle