Javascript 用于添加/删除类的jQuery脚本已成功添加该类，但无法删除同一类

因此，本质上我想要一个元素，当单击该元素时，它会触发一个jQuery脚本，该脚本可以向该特定元素添加或删除一个类（在本例中，我添加了一个更改背景图像css属性的类）

函数readMore（）{ var subID=event.target.id； var footerTarget=$（'[id='+subID+'][class=“articleFooter”]'）； var newTarget=$（'[id='+subID+'][class=“showArticlePara”]'）； newTarget.toggle（）； var footerTarget=$（'[id='+subID+'][class=“articleFooter”]'）； if（newTarget.css（“显示”）=“块”）{ footerTarget.addClass（“changeBackgroundImage”）； } 否则{ removeClass（“changeBackgroundImage”）； } 警报（footerTarget.class（））； } $（文档）.ready（函数（）{ });

.articlessection{
宽度：100%；
显示：块；
字体系列：投石机MS；
字体大小：1.1米；
颜色：白色；
边缘底部：25px；
垫底：3件；
背景色：RGBA（255，255，255，0.1）；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
边界半径：2px；
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
-ms框尺寸：边框框；
}
.文章内容{
/*高度：70像素*/
填充：10px 15px 5px 15px；
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
-ms框尺寸：边框框；
}
.投票{
}
voteBox先生{
}
.articleFooter{
宽度：100%；
高度：10px；
内容：“更多”；
背景图像：url（'../Images/Icons/showMoreBlack13030.png'）；
背景尺寸：包含；
背景重复：无重复；
背景位置：中心；
过渡：0.2s缓进缓出；
}
.articleFooter:悬停{
背景图像：url（'../Images/Icons/chevron13040Blue.png'）；
}
.changeBackgroundImage{
宽度：100%；
高度：10px；
内容:"少";；
背景图像：url（'../Images/Icons/showlesblack13030.png'）；
背景尺寸：包含；
背景重复：无重复；
背景位置：15px中心；
过渡：0.2s缓进缓出；
}
.changeBackgroundImage:悬停{
背景图像：url（'../Images/Icons/chevron13040BlueRotated.png'）；
}

令人兴奋的新研究表明，在任何男性群体中，至少有一个是同性恋

我真的希望是卢克，他很可爱。

函数的第一行是

event.target.id

您将从何处接收

事件

对象？这是在抛出引用错误：未定义事件

解决方案1

1） 以本机方式调用

readMore

函数时传递

id

<div class="articleFooter" id="one" onclick="readMore(this.id)"></div>

3） 没有函数作为

.class（）

。删除此行

alert(footerTarget.class());

解决方案2

另一种方法是使用jQuery处理事件的方式，因为您已经在使用

jQuery

<div class="articleFooter" id="one"></div>

我认为您的问题（除了“重复id”问题；）是如何选择元素：

var footerTarget = $('[id='+subID+'][class="articleFooter"]');

通过使用

[class=“articleFooter”]

，您说的是“给我一个元素，它的类是“articleFooter”（即

class=“articleFooter”

）……但是，在添加了“changeBackgroundImage”之后，元素的类现在是“articleFooter”和“changeBackgroundImage”（即，

class=“articleFooter changeBackgroundImage”

），因此它不匹配

有几种方法可以解决这个问题

1） 人们通常做这类选择的更“常见”的方式是在jQuery中使用“id”和“class”选择器速记：“#MY_id”表示id，“.MY_class”表示类。例如：

$("#" + subID + ".articleFooter")

或者，以更有效的方式：

$("#" + subID).filter(".articleFooter")

在这两种情况下，if都会将元素与该id和类匹配（不过，该元素也可能有其他类）

2） 不太常见的方法（但也可以解决此问题）是在现有代码中使用不同的属性模式。您使用的是

[attribute='value']

，这意味着属性的值必须正好选择器中的值（因为选择器中的

=

）

为了允许其他类出现在元素的类列表中，您可以使用属性的“包含”选择器：

[attribute*='value']

，这意味着属性的值必须包含但不限于选择器中的值

这两种方法都可以，但第一种方法是你会经常看到的，因为速记更容易打字

---

请修复您的重复id问题，否则您将继续看到其他问题。：D

您对多个元素使用相同的id

一个

。id应该是唯一的。@Titus我知道，我知道，不礼貌等等，但这在当时似乎是个好主意，我希望这不会影响我目前的问题ence；一步一个脚印。@PaulMcGlinchey-这不仅仅是不礼貌的行为，它实际上影响了JS和jQuery的功能……例如，选择（在JS和jQuery中）在多次位于DOM中的id上，将只返回分配了该id的第一个元素。多次使用同一id并不是不礼貌的行为。使用

newTarget.toggleClass（'changeBackgroundImage'））

像这样：没有理由的否决票..解释原因以便我们大家都能学习。我喜欢这种改变我已经做过的事情的解决方案，但它没有修复类切换，它似乎仍然是零星的。在这种情况下，它会在第二次单击时添加类，但在之后的任何时候都不会删除它？不管怎样，不是我，我喜欢你触发的方式这件事解决不了我目前的问题我可以请你吃饭吗？我想我喜欢

$("#" + subID + ".articleFooter")

$("#" + subID).filter(".articleFooter")