JQuery onclick 选择另一个类

Question

我有这样的代码:

$(".um").click(function () {
    $(".subconteudo.dois").slideUp();
    $(".subconteudo.tres").slideUp();
    $(".subconteudo.quatro").slideUp();
    $(".subconteudo.cinco").slideUp();
    $(".subconteudo.um").slideDown(3000);
});

每个类别再进行 5 次(嗯，dois，...)。我正在尝试用“this”编写一个更小的代码，如下所示:

$(".um, .dois, .tres, .quatro, .cinco").click(function () {
    $(".subconteudo.um").slideUp();
    $(".subconteudo.dois").slideUp();
    $(".subconteudo.tres").slideUp();
    $(".subconteudo.quatro").slideUp();
    $(".subconteudo.cinco").slideUp();
    $(this + ".subconteudo").slideDown();
});

这可能吗？如何？谢谢顺便说一句，html代码是这样的:

<div class="menu">
    <div class="submenu um"></div>
    <div class="submenu dois"></div>
    <div class="submenu tres"></div>
    <div class="submenu quatro"></div>
    <div class="submenu cinco"></div>
</div>
<div class="conteudo">
    <div class="subconteudo um"></div>
    <div class="subconteudo dois"></div>
    <div class="subconteudo tres"></div>
    <div class="subconteudo quatro"></div>
    <div class="subconteudo cinco"></div>
</div>

Answer 1

使用 filter() 和一个简单的正则表达式 (/\b(um|dois|tres|quatro|cinco)\b/g) 尝试此解决方案:

$(".um, .dois, .tres, .quatro, .cinco").click(function () {
    var firedClass = "."+this.className.match(/\b(um|dois|tres|quatro|cinco)\b/g)[0];
    $(".subconteudo").filter(".um, .dois, .tres, .quatro, .cinco").not(firedClass).slideUp();
    $(".subconteudo").filter(firedClass).slideDown();
});

它通过正则表达式获取菜单单击类。这是必要的，因为 menu 可能有多个列表类 .um、.dois、.tres、.quatro、.cinco -(如果有，则选择按以下顺序找到的第一个: .um -> .dois -> .tres -> .quatro -> .cinco，这是故意的)。

此外，这将阻止单击的 subconteudo 向上滑动。 (只会向上滑动其他内容。)

<强> Demo link here.