0

我正在尝试使用类中的数据添加和删除<li>'s ，问题是当我有多个单词或单词之间有空格时，jQuery 不再识别它是同一个单词并添加相同的价值再次。<ul>add-to-favourites<ul>

你可以在这里看到问题：http: //jsfiddle.net/ZWxBb/

尝试单击文本行，您将看到它们被添加和删除到<ul>除了类的第一个实例之外，它每次单击时都会添加。

如果您可以使用超过 2 个单词作为元素文本，再加上添加一个 div，单击该 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

您可以使用classHTML 元素的属性来定义多个类，方法是用空格分隔它们。当您的元素文本包含一个或多个空格时，会发生两件事：

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

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

而这一行：

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

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

我的建议是在将文本存储在之后用破折号替换空格num，并使用它来选择或分配您的单个类：

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

更新了演示

于 2012-08-22T15:26:19.840 回答
1

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

处理此问题的一种方法是将所有空格转换为不同的字符。

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

那是因为您将 'num' var 添加为 CSS 类名。CSS 类名不能有空格。在将空格和特殊字符用作 CSS 类名之前，应将它们替换为空字符串。

于 2012-08-22T15:26:49.993 回答