prihlasenyprihlasit | registrovat

.toggleClass()

.toggleClass(className) vráti: jQuery

Prida alebo odstrani triedu z kazdeho zo zvolenych prvkov, v zavislosti na pritomnosti triedy alebo hodnoty pre argument prepinaca.

Tato metoda prijma ako parameter jeden alebo viac tried. V prvej verzii, ak zvoleny element uz ma triedu, potom bude odstranena; ak element nema triedu, potom bude pridana.Napriklad, mozme pouzit .toggleClass() na jednoduchy <div>

Some text.

Prvym pouzitim $('div.tumble').toggleClass('bounce') dostaneme:

Some text.

Druhym pouzitim $('div.tumble').toggleClass('bounce'), <div> trieda vrati samotnu tumble hodnotu:

Some text.

Applying .toggleClass('bounce spin') to the same <div> alternates between <div class="tumble bounce spin"> and <div class="tumble">.

The second version of .toggleClass() uses the second parameter for determining whether the class should be added or removed. If this parameter's value is true, then the class is added; if false, the class is removed. In essence, the statement:

$('#foo').toggleClass(className, addOrRemove);

je ekvivalent k:

if (addOrRemove) {
    $('#foo').addClass(className);
  }
  else {
    $('#foo').removeClass(className);
  }

$('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar') {
    return 'happy';
  } else {
    return 'sad';
  }
});

Tento priklad bude menit happy triedu pre <div class="foo"> element ak jeho rodicovsky element ma triedu bar; inak bude prepinat sad triedu.

Priklady:

Prepne triedu 'highlight' ked je kliknute na odstavec.
 <!DOCTYPE html>
<html>
  <head>
    <style>
      p { margin: 4px; font-size:16px; font-weight:bolder; cursor:pointer; }
      .blue { color:blue; }
      .highlight { background:yellow; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </head>
  <body>
    <p class="blue">Click to toggle</p>
    <p class="blue highlight">highlight</p>
    <p class="blue">on these</p>
    <p class="blue">paragraphs</p>
    <script>
      $("p").click(function () {
        $(this).toggleClass("highlight");
      });
    </script>
  </body>
</html>
Prida 'highlight' triedu po kazdom tretom kliknuti na odstavec, a odstrani kazdy prvym a druhym kliknutim.
 <!DOCTYPE html>
<html>
  <head>
    <style>
      p { margin: 4px; font-size:16px; font-weight:bolder; cursor:pointer; }
      .blue { color:blue; }
      .highlight { background:red; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </head>
  <body>
    <p class="blue">Click to toggle (<span>clicks: 0</span>)</p>
    <p class="blue highlight">highlight (<span>clicks: 0</span>)</p>
    <p class="blue">on these (<span>clicks: 0</span>)</p>
    <p class="blue">paragraphs (<span>clicks: 0</span>)</p>
    <script>
      var count = 0;
      $("p").each(function() {
        var $thisParagraph = $(this);
        var count = 0;
        $thisParagraph.click(function() {
          count++;
          $thisParagraph.find("span").text('clicks: ' + count);
          $thisParagraph.toggleClass("highlight", count % 3 == 0);
        });
      });
    </script>
  </body>
</html>

API

© 2009 Shaddow admin hosting od VIPHosting