0

クラス内のデータを使用して<li>にを追加および削除しようとしていますが、問題は、複数の単語または単語間にスペースがある場合、jQueryが同じ単語であることを認識せず、同じ単語を追加することです。再び価値。<ul>add-to-favourites<ul>

ここで問題を確認できます：http：//jsfiddle.net/ZWxBb/

テキストの行をクリックしてみてください。クリックするたびに追加される<ul>クラスの最初のインスタンスを除いて、テキストの行が追加および削除されます。

また、要素テキストとして2つ以上の単語を使用でき、さらにdivを追加して、クリックするとお気に入りからアイテムを削除できると便利です。

HTML：

<div class="add-to-favourites">Two Words</div>
<div class="add-to-favourites">OneWords</div>
<div class="add-to-favourites">NoSpaces</div>
<ul id="favourites"></ul>

jQuery：

$(function () {
$('.add-to-favourites').click(function() {
   var num = $(this).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>');
   }
})
});

<br/>ありがとう、ベン

4

4 に答える 4

2

HTML要素の属性を使用して、class複数のクラスをスペースで区切ることにより、それらを定義できます。要素テキストに1つ以上のスペースが含まれている場合、次の2つのことが起こります。

セレクターが間違っているため、この行で要素が選択されることはありません。

var $fav_li = $fav.find('.' + num + '_li');

そしてこの行：

$('#favourites').append('<li class="' + num + '_li">' + num + '</li>');

少なくとも2つのクラスを持つ要素を追加します。

私の提案は、テキストをに格納した後にスペースをダッシュ​​に置き換えnum、それを使用して単一のクラスを選択または割り当てることです。

var num = $(this).text().replace(' ', '-');

更新されたデモ

于 2012-08-22T15:26:19.840 に答える
1

CSSセレクターでは、各セレクターを区切るためにスペースが使用されるため、クラス名にスペースを含めることはできません。したがって、divをクリックすると、クラス名の要素とタグ名の子要素であるTwo Wordsを選択しようとすることになります。.Two Words_liTwoWords_li

これに対処する1つの方法は、すべてのスペースを別の文字に変換することです。

var num = $(this).text().replace( /\s+/g, "-" );
于 2012-08-22T15:26:55.633 に答える
1

lzzeyが言ったように、クラス名にスペースを含めることはできません。クラスマッチングで.replace（ ""、 "_"）を実行してみてください。

$('.add-to-favourites').click(function() {
   var num = $(this).text();
   var numClass = num.replace(" ", "_" );
   var $fav = $('#favourites');
   var $fav_li = $fav.find('.' + numClass  + '_li');

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

http://jsfiddle.net/ZWxBb/2/

アップデート：

liを識別するためにテキスト以外のものを使用することをお勧めします

HTML：

<div class="add-to-favourites" data-item="1">Two Words</div>
<div class="add-to-favourites" data-item="2">One asd asd asd asd Words</div>
<div class="add-to-favourites" data-item="3">NoSpaces</div>

次にjs：

$('.add-to-favourites').click(function() {
   var num = $(this).data( "item" );
   var text = $(this).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">' + text + '</li>');
   }
})

http://jsfiddle.net/ZWxBb/3/

于 2012-08-22T15:28:54.137 に答える
0

これは、CSSクラス名として「num」変数を追加するためです。CSSクラス名にスペースを含めることはできません。CSSクラス名として使用する前に、スペースと特殊文字を空の文字列に置き換える必要があります。

于 2012-08-22T15:26:49.993 に答える