JQuery onclick 用另一个类选择这个答案

【问题标题】：JQuery onclick select this with another classJQuery onclick 用另一个类选择这个
【发布时间】：2013-07-10 01:26:08
【问题描述】：

我有这样的代码：

$(".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>

【问题讨论】：

为什么不只是$(this).slideDown()？
为所有这些设置一个通用类并执行$('.commonclass').click(function(){$('.subconteudo').slideUp();}) 这样您将节省大约 6 行代码。
@SebastianUrielMurawczik 回答这个问题！

标签： jquery class this

【解决方案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.

【讨论】：

我编辑了答案。代码行为相同，但更简单。

【解决方案2】：

为什么不只是这个

$(".um, .dois, .tres, .quatro, .cinco").click(function () {
    if($(this).hasClass('subconteudo')) {
       $(".subconteudo").not(this).slideUp();
    }
    else if ($(this).hasClass('submenu')) {
       $(".submenu").not(this).slideUp();
    }
    $(this).slideDown(3000);
});

由于所有元素似乎都有一个共同的 classsubconteundo ，因此您始终可以将它们定位为不包括当前单击的元素。

【讨论】：

我必须指定要向上滑动的上一个类，否则它不会做任何事情
因为你没有一个常见的类出现，你可以检查被点击的元素上的类。检查编辑。如果你有多个类，这很麻烦，所以对于每个类实例都需要一个检查条件。你可以使用一个通用类。

【解决方案3】：

是的！ :)

您只能使用 4 行。我对原来的 HTML 代码做了一点改动，但我认为现在更好了。

$(".menu").children().click(function () {
    $(".conteudo").children().slideUp();
    $(".conteudo ."+$(this).attr("class")).slideDown();
});

HTML

<div class="menu">
    <div class="um">MENU 1</div>
    <div class="dois">MENU 2</div>
    <div class="tres">MENU 3</div>
    <div class="quatro">MENU 4</div>
    <div class="cinco">MENU 5</div>
</div>
<div class="conteudo">
    <div class="um">CONTEUDO 1</div>
    <div class="dois">CONTEUDO 2</div>
    <div class="tres">CONTEUDO 3</div>
    <div class="quatro">CONTEUDO 4</div>
    <div class="cinco">CONTEUDO 5</div>
</div>

You can see the demo here

【讨论】：

这是我一直在寻找的，但我需要你退休的课程，所以我更容易使用来自 acdcjunior 的代码。

【解决方案4】：

为所有这些设置一个通用类并执行$('.commonclass').click(function(){$('.subconteudo').slideUp();}) 这样您将节省大约 6 行代码。

【讨论】：