1

ユーザーが要素をクリックすると、そのクラス内の別の要素がリストに追加されます。 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/

編集: 2 つのスパンが同じ番号の場合、それらを個別にお気に入りにすることはできないことに気付きました。スクリプトが混乱し、スパン番号が同じであるため、両方の div が同じであると考えます。2 つのスパン番号が同じ場合でも、この同じ機能を維持するソリューションはありますか?

例えば。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

フィドル： 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 に答える
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 に答える
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 に答える