使用jQuery实现点击卡片隐藏指定元素的代码运行失效是什么原因？

问题原因 #

• 类名不符合CSS规范，无法被正确识别。CSS规则明确要求类名不能以数字开头，你定义的1card、2card、3card都属于无效类名，jQuery选择器无法正常匹配到对应元素，这是代码失效的核心原因之一。
• 判断条件逻辑完全错误。$(".1card")无论是否匹配到元素，都会返回一个jQuery对象，而对象在布尔判断中永远为true，所以你的代码永远只会执行if分支里的逻辑，根本不可能进入else分支执行隐藏第一个卡片的操作。
• 没有区分当前点击的卡片。你给所有.cards元素绑定了点击事件，但事件触发后没有判断当前点击的是第几个卡片，完全不符合“点击第2、3个卡片才隐藏第一个”的需求。

修复方案 #

1. 先修改所有卡片的自定义类名，改为符合CSS规范的命名，比如将1card改为card1、2card改为card2、3card改为card3。
2. 调整JS逻辑，点击时先判断当前点击的元素是不是第2或第3个卡片，符合条件再隐藏第一个卡片即可，参考代码如下：

$(".cards").on("click", function(){
    if ($(this).hasClass("card2") || $(this).hasClass("card3")) {
        $(".card1").slideUp(1000);
    }
})

内容的提问来源于stack exchange，提问作者chupamestepenk