Question

我正在尝试使用类<li>中的数据向<ul>添加和删除add-to-favourites，问题是当我有多个单词或者单词之间的空格jQuery不再认识到它是同一个单词并再次向<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>');
   }
})
});

谢谢，本

Answer 1

您可以使用HTML元素的class属性通过用空格分隔来定义多个类。当元素文本包含一个或多个空格时，会发生两件事：

此行永远不会选择任何元素，因为您最终选择了错误的选择器。

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

这一行：

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

将附加一个至少包含两个类的元素。

我的建议是在num中存储文本后用短划线替换空格，然后用它来选择或分配单个类：

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

Updated DEMO

Answer 2

类名不能包含空格，因为在CSS选择器中，空格用于分隔每个选择器。因此，当您点击Two Words div时，您最终会尝试选择.Two Words_li，这是具有类名Two的元素和具有标记名Words_li的子元素。

解决这个问题的一种方法是将所有空格转换为不同的字符。

var num = $(this).text().replace( /\s+/g, "-" );

Answer 3

正如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/

Answer 4

这是因为你将'num'var添加为CSS类名。 CSS类名称不能包含空格。在将空格和特殊字符用作CSS类名之前，应将其替换为空字符串。

.append不使用空格

4 个答案: