交換css類

我想使用jQuery在兩個鏈接中交換類。我有一個HTML代碼，如：交換css類

<div class="showHide1"> 
    <a id="aaa" class="show">AAA</a> 
    <a id="bbb" class="hide">BBB</a> 
</div> 

<div class="showHide2"> 
    <a id="aaa" class="show">AAA</a> 
    <a id="bbb" class="hide">BBB</a> 
</div>

和一個簡單的.css文件：

.show { 
    display: block; 
} 

.hide { 
    display: none; 
}

現在我要點擊「顯示隱藏」分區某處後替換兩個鏈接的類。

$('#showHide1').click(function() { 
    if ($("#aaa").hasClass('show')) { 
     $("#aaa").attr("class","hide"); 
    } 
    else { 
     $("#aaa").attr("class","show"); 
    } 

    if ($("#bbb").hasClass('hide')) { 
     $("#bbb").attr("class","show"); 
    } 
    else { 
     $("#bbb").attr("class","hide"); 
    } `

我敢肯定有一個更好的辦法來解決這個問題，因爲這僅適用於「showHide1」格，作品和我需要複製幾乎相同的代碼來得到它的工作了「showHide2」 DIV 。任何人都可以向我展示一個更好的解而不是檢查如果類是存在的，然後要麼添加或刪除其

感謝

的Dawid

來源

2011-05-05 Dawid

備註：頁面上的ID應該是唯一的。 – Jeremy 2011-05-05 18:55:09

我看到你的類之間唯一的區別就是'display'。如果這是你所要做的，你可以使用jQuery的.show（）和.hide（）方法（或者fadeIn，fadeOut等等），如果不是的話，上面的兩個答案已經被釘住了。 – 2011-05-05 19:00:21

擴大，而不必cdeszaq的回答， .show和.hide只使用.hide那麼你可以使用以下內容：

HTML：

<div id="showHide1" class="showHide"> 
    <a id="aaa">AAA</a> 
    <a id="bbb" class="hide">BBB</a> 
</div> 

<div id="showHide2" class="showHide"> 
    <a id="aaa">AAA</a> 
    <a id="bbb" class="hide">BBB</a> 
</div>

CSS：

.hide { 
    display: none; 
}

JS：

$('.showHide').click(function() { 
    $('a', this).toggleClass('hide'); //I had inverted my selector and context earlier, this is correct 
});

來源

2011-05-05 18:58:05 Chad

+1你的答案比我的完整得多。好樣的！ – cdeszaq 2011-05-05 18:59:46

@cdeszaq謝謝，這是你的想法，但是當我寫這個時，你所有的只是一個到toggleClass的鏈接，所以我只是想給出一個代碼示例。我看到你編輯了，對不起：P – Chad 2011-05-05 19:01:25

@Chad - 是的，我傾向於拋棄一個快速，快速的答案，然後通常回去並擴大背景和更多信息。 – cdeszaq 2011-05-05 19:03:00

使用.toggleClass()。 .toggleClass()已經爲您處理該邏輯。

您的代碼將是：

$('#showHide1').click(function() { 
    $("#aaa") 
     .toggleClass("hide") 
     .toggleClass("hide"); 
    $("#bbb") 
     .toggleClass("hide") 
     .toggleClass("hide"); 
});

注：這假定show和hide班在正確的狀態開始。

來源

2011-05-05 18:53:31 cdeszaq

我想您一定你的id和類混合起來試試這個網站：

<div id="showHide1"> 
    <a class="show aaa">AAA</a> 
    <a class="hide bbb">BBB</a> 
</div> 

<div id="showHide2"> 
    <a class="show aaa">AAA</a> 
    <a class="hide bbb">BBB</a> 
</div>

JS：

$('#showHide1, #showHide2').click(function() { 
    var a_showing = $('.aaa.show', this); 
    var a_hiding = $('.aaa.hide', this); 
    var b_showing = $('.bbb.show', this); 
    var b_hiding = $('.bbb.hide', this); 
    a_showing.addClass('hide').removeClass('show') 
    a_hiding.addClass('show').removeClass('hide') 
    b_showing.addClass('hide').removeClass('show') 
    b_hiding.addClass('show').removeClass('hide') 
});

小提琴：http://jsfiddle.net/maniator/qMBRq/

來源

2011-05-05 18:55:48 Neal

你有太多的代碼來做這麼小的事情。是的，身份證是不可靠的，但有4個變量，而且還有4條線......如果他真的存在，奧卡姆將在他的墳墓中翻滾。 – cdeszaq 2011-05-05 19:02:17

This是我會怎麼做。

HTML

<div class="showhide"> 
    <a id="aaa1" class="show">AAA</a> 
    <a id="bbb1" class="hide">BBB</a> 
</div> 

<div class="showhide"> 
    <a id="aaa2" class="show">AAA</a> 
    <a id="bbb2" class="hide">BBB</a> 
</div>

的JavaScript

$(function() { 
    $('a.hide').hide(); 
    $('div.showhide').click(function() { 
     $(this).children('a').toggle(); 
    }); 
});

這樣，如果用戶不啓用JavaScript，他們仍然能夠看到的一切。這可能會導致無風格內容的閃爍（不完全，但基本上），因爲您在通過JavaScript準備好DOM後添加了隱藏。現在，這對你來說可能並不重要，所以你必須做出決定。

來源

2011-05-05 19:07:48

回答

相關問題