jquery - 当类相同时，将项目添加到 onClick

Question

我正在尝试创建一个收藏夹功能(类似于 StackOverflow 上这篇文章左侧的星星)，当用户单击某个元素时，该类中的另一个元素将被添加到列表中，主要的复杂性是所有的 div 都有相同的类但内容不同。

所以当您点击.mydiv时相应跨度类的编号应添加为 <li>到<ul> 。作为额外的好处，如果相反的情况也成立，那就太好了，即再次单击 div 会从 <ul> 中删除该项目。

HTML:

<div class="mydiv" > <span class="number">1</span> This is first div with same id. </div>
<div class="mydiv" > <span class="number">2</span> This is second div with same id. </div>
<div class="mydiv" > <span class="number">3</span> This is third div with same id. </div>
<ul id="favourites" > </ul>​

jQuery:

$('.mydiv').click(function() {
  $('#favourites').append('<li>' + text + '</li>');
});  ​

http://jsfiddle.net/uv25u/

编辑:我刚刚注意到，如果两个跨度具有相同的编号，那么您不能单独收藏它们，即。脚本感到困惑，并认为两个 div 是相同的，因为它们具有相同的跨度编号，是否有解决方案即使在两个跨度编号相同时也能保持相同的功能？

例如。如果 HTML 是这样的，我们可以让它工作吗:

<div class="mydiv" > <span class="number">1</span> This is first div with same id. </div>
<div class="mydiv" > <span class="number">2</span> This is second div with same id. </div>
<div class="mydiv" > <span class="number">2</span> This is third div with same id. </div>
<ul id="favourites" > </ul>​

附:如果脚本还自动将新的跨度添加到添加的 <li>单击后删除 <li>从列表中来看，这会很棒，这可能吗？

非常感谢

Answer 1

fiddle :http://jsfiddle.net/uv25u/17/ <- 比较数字
编辑: http://jsfiddle.net/uv25u/20/ <- 比较整个内容

$('.mydiv').click(function() {
    if (! $(this).hasClass('favorite')) { // if not already favorite
      $('#favourites').append($('<li>'+$(this).html()+'</li>'));  // add the cliked item to the favourites as an li
      $(this).addClass('favorite');  // mark clicked item as favourite
   } else { // if already favorite
      var content = $(this).html(); // store content of clicked div
      $(this).removeClass('favorite');  // unmark clicked item as favourite
      $('#favourites li').each(function() {  // loop trough favourites
          if ($(this).html() == content) { // check if contents match
              $(this).remove(); // remove from favourites if match
          }
      });

   }


});