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>

P.S。如果该脚本还自动为添加的<li>添加了一个新的范围，当点击该列表时，从列表中移除<li>将是非常棒的，这可能吗？

非常感谢

Answer 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);
    }
});

Fiddle

Answer 2

尝试如下所示，

$('.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>');
   }
});

DEMO： http://jsfiddle.net/uv25u/7/

Answer 3

小提琴：http://jsfiddle.net/uv25u/17/＆lt; - 比较数字
修改： http://jsfiddle.net/uv25u/20/＆lt; - 对整个内容进行比较

$('.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
          }
      });

   }


});

Answer 4

$('.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>');
    }
});

FIDDLE

当类相同时，将项目添加到<ul> onClick </ul>

4 个答案: