的JQuery的onclick與其他類

選擇此我有這樣的代碼：的JQuery的onclick與其他類

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

5次爲每個類的（嗯，的DOI，...）。而我試圖與「這個」像這樣的小碼：

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

來源

2013-07-11 Diogo Almiro

爲什麼不'$（本）.slideDown（）'？ –

將一個普通類放到所有這些元素中，並執行'$（'。commonclass'）。click（function（）{$（'。subconteudo'）。slideUp（）;}）''''這樣你就可以保存6行。 –

@SebastianUrielMurawczik作出答案！ –

嘗試使用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.

來源

2013-07-11 17:07:22 acdcjunior

謝謝你的工作。 –

我編輯了答案。代碼行爲相同，但更簡單。 – acdcjunior

爲什麼不只是這個

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

由於所有的元素似乎有一個共同的類subconteundo，你總是可以瞄準他們excluing當前點擊的元素。

來源

2013-07-11 16:54:52

我必須指定我想要向上滑動哪個類別，否則它不會執行任何操作 –

因爲您沒有常見的類別出現，所以您可以離開檢查單擊的元素上的類別。檢查編輯..如果你有多個類，這是一個麻煩，所以對於每個類實例，你需要一個檢查條件..你可以使用一個普通的類。 –

把通用類所有這些，做$('.commonclass').click(function(){$('.subconteudo').slideUp();})這樣you'll保存像6號線。

來源

2013-07-11 17:21:17

是的！ :)

您只能使用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

來源

2013-07-12 01:20:51

這就是我一直在尋找的東西，但我需要你退休的類，所以使用acdcjunior的代碼更容易。 –

的JQuery的onclick與其他類

回答

相關問題