1

我正在尝试创建一个收藏夹功能（类似于 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>​

ps如果脚本还自动向添加的添加了一个新的跨度<li>，当单击它时从列表中删除<li>那会很棒，这可能吗？

非常感谢

4

4 回答 4

1 
$('.mydiv').click(function() {
    var number = $(".number", this).text(),
        $favourites = $("#favourites"),
        $li = $("[data-number=" + number + "]", $favourites);
    if ($li.length) {
        $li.remove();
    } else {
      $("<li>").text(number).attr("data-number", number).appendTo($favourites);
    }
});

小提琴。

于 2012-08-21T16:45:45.663 回答
1

尝试像下面这样，

$('.mydiv').click(function() {
   var num = $(this).find('.number').text();
   var $fav = $('#favourites');
   var $fav_li = $fav.find('.' + num + '_li');

   if ($fav_li.length) {
      $fav_li.remove();
   } else {
      $('#favourites').append('<li class="' + num + '_li">' + num + '</li>');
   }
});

演示：http: //jsfiddle.net/uv25u/7/

于 2012-08-21T16:46:10.573 回答
1

小提琴： 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
          }
      });

   }


});
于 2012-08-21T17:01:32.753 回答
0 
$('.mydiv').on('click', function() {
    var numb = $('.number', this).text(),
        elem = $('li', '#favourites').filter(function() {
            return $(this).text() === numb;
        });
    if (elem.length) {
        elem.remove();
    }else{
        $("#favourites").append('<li>' + numb + '</li>');
    }
});  ​

小提琴

于 2012-08-21T16:55:40.647 回答