Javascript jQuery在多个类名之间单击函数

我不熟悉jQuery，我正在尝试在jQuery中编写一个

。单击（）

函数，该函数从

#按钮

id触发到

.hide（）和.show（）

卡片id中的元素

例如，如果我单击.bluediv，它应该只显示（）.blueCard div并隐藏.redCard和greenCard

<div id="buttons">
    <div class="blue">Click Me!</div>
    <div class="red">Click Me!</div>
    <div class="green">Click Me!</div>
</div>

<div id="cards">
    <div class="blueCard blue"></div>
    <div class="redCard red"></div>
    <div class="greenCard green"></div>
</div>

---

问题可能就在这里

if（$（按钮颜色+卡片颜色）.length>0）{

您不必在此处使用$，因为

按钮颜色

和

卡片颜色

已经保存。

试试这个简单的代码

$("#buttons > div").click(function(){
  var class= $(this).attr('class');//get the color class
 $('.cards > div').hide();//hide all cards
 $('.cards .'+class).show();//show only the cart with the color class
});

---

绑定

div

s上的事件并获取所单击元素的类。在

#cards

中仅显示该事件，并隐藏其他事件

//在#按钮内的所有s上绑定单击事件
$（'#按钮div'）。单击（函数（）{
//获取单击的div的类名
var className=$（this.attr（'class'）；
//在卡片中显示相应的div
//隐藏他人
$（'#cards.'+className）.show（）.sides（）.hide（）；
})；

#按钮div{
宽度：100px；
高度：100px；
利润率：10px；
浮动：左；
颜色：白色；
文本对齐：居中；
}
蓝先生{
背景：蓝色；
}
格林先生{
背景：绿色；
}
瑞德先生{
背景：红色；
}
#纸牌{
明确：两者皆有；
}

点击我！
点击我！
点击我！
蓝色
红色
绿色

$（“#按钮div”）。单击（函数（）{
var buttonColors=$（this.attr（“数据颜色”）；
$（'#cards div'）.hide（）
$（'..+按钮颜色）.show（）
})；

#卡片分区{显示：无}

点击蓝色！
点击红色！
点击绿色！
蓝色
红色
绿色

你想得太多了

首先绑定

#按钮div

上的单击事件
然后隐藏

#卡中的所有div

最后，使用单击的div的

类

，显示正确的卡

$（“#按钮div”）。在（'click'，function（）上{
$（'#cards>div'）.hide（）；
$（'#cards>div.+$（this.attr（'class'））.show（）；
})

#cards>div{宽度：100px；高度：100px；显示：无；}
#卡片.蓝色{背景：蓝色；}
#卡片.红色{背景：红色；}
#卡片.绿色{背景：绿色；}

点击我！
点击我！
点击我！

非常感谢Tushar！这很有帮助me@alimarwan您可以将一个类添加到所有

div

s中以将其作为目标，并使用

.sides（'.thatClass'）

仅选择它们。很抱歉，我删除了注释，因为我输入了错误的代码，现在尝试修改它，但您回答了…谢谢

$("#buttons > div").click(function(){
  var class= $(this).attr('class');//get the color class
 $('.cards > div').hide();//hide all cards
 $('.cards .'+class).show();//show only the cart with the color class
});