CODEWITHSUNDEEP
jqueryclassthis
Diogo Almiro
Diogo Almiro

Reputation: 373

JQuery onclick select this with another class

I have a code like this:

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

5 more times for each of the classes(um,dois,...). And I'm trying to make a smaller code with 'this' like 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();
});

Is it possible? How? Thank You By the way the html code is like this:

<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>

Upvotes: 3

Views: 168

Answers (4)

Lu&#237;s Pimentel Lopes
Lu&#237;s Pimentel Lopes

Reputation: 31

Yes it is! :)

You can only use 4 lines. I've changed a little bit the original HTML code but I think is better now.

JS

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

Upvotes: 1

acdcjunior
acdcjunior

Reputation: 135772

Try this solution using filter() and a simple regex (/\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();
});

It gets the menu clicked class through a regex. It is necessary because the menu could have more than one class of the list .um, .dois, .tres, .quatro, .cinco - (if it does, it picks the first found in this order: .um -> .dois -> .tres -> .quatro -> .cinco, which is intentional).

Also, this will keep the clicked subconteudo from sliding up. (Will slide up only the others.)

Demo link here.

Upvotes: 1

Sebastian Uriel Murawczik
Sebastian Uriel Murawczik

Reputation: 183

put a common class to all those and do $('.commonclass').click(function(){$('.subconteudo').slideUp();}) that way you´ll save like 6 lines.

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55750

Why not just this

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

As all the elements seem to have a common classsubconteundo , you can always target them excluing the currently clicked element.

Upvotes: 1

Related Questions