toggleClass()

.toggleClass( className )

מחזירה: jQuery

תיאור: מוסיף או מסיר אחת או יותר מחלקות, מכל אלמנט בסט אלמנטים בהתאמה, תלוי מקיום של מחלקה, או ערך של ארגומנט החלפה.

.toggleClass( className )

הוספה בגרסה: 1.0

className

מחרוזת

אחד או יותר שמות מחלקה (מופרדים ברווחים) להחלפה לכל אלמנט ברשימה בהתאמה.

.toggleClass( className, switch )

הוספה בגרסה: 1.3

className

מחרוזת

אחד או יותר שמות מחלקה (מופרדים ברווחים) להחלפה לכל אלמנט ברשימה בהתאמה.

switch

ערך בולאני

ערך בולאני כדי לקבוע האם יש להסיר או להוסיף מחלקה.

.toggleClass( function(index, class), [switch] )

הוספה בגרסה: 1.4

function(index, class)

פונקציה

פונקציה שמחזירה שמות של המחלקות להחלפה בתכונת מחלקה של כל אלמנט ברשימה בהתאמה. מקבל אינדקס המיקום של האלמנט ברשימה וערך מחלקה ישנה בתור ארגומנטים.

switch

ערך בולאני

ערך בולאני כדי לקבוע האם יש להסיר או להוסיף מחלקה.

שיטה הזו מקבלת אחד או יותר שמות של מחלקות בתור פרמטר. בגירסה ראשונה, אם לאלמנט ברשימה בהתאמה של אלמנטים יש מחלקה, אז הוא ימחק; אם לאלמנט אין מחלקה, אז הוא יוסף. לדוגמה, אנחנו יכולים לישם .toggleClass() עבור <div> פשוט:

<div class="tumble">Some text.</div>

בפעם הראשונה שאנחנו מישמים $('div.tumble').toggleClass('bounce'), נקבל:

<div class="tumble bounce">Some text.</div>

אחרי יישום השני $('div.tumble').toggleClass('bounce'), מחלקה <div> תחזור לערך יחיד tumble:

<div class="tumble">Some text.</div>

לישם .toggleClass('bounce spin') לאותו <div> נחליף בין <div class="tumble bounce spin"> ו- <div class="tumble">.

גירסה השניה .toggleClass() משמשת פרמטר השני עבור הגדרה האם יש להוסיף או להסיר מחלקה. אם ערך של פרמטר הוא true, אז מחלקה מתווספת; אם false, מחלקה נמחקת. בעיקרון הצהרה:

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

שווה ל-:

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

החל מ- с jQuery 1.4, שיטה .toggleClass() מאפשרת לנו לציין שם המחלקה עבור החלפה באמצעות העברה לתוך הפונקציה.

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

דוגמה הזו מחליפה מחלקה happy עבור אלמנטים <div class="foo"> אם לאלמנט הורה שלהם הייתה מחלקה bar; אחרת היא תחליף מחלקה sad.

דוגמאות

דוגמה 1

מוסיף class 'highlight' אם אין אותו, ומוריד אם יש אותו כשה פסקה נלחצה.

$("p").click(function () {
      $(this).toggleClass("highlight");
    });

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 1 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
    $("p").click(function () {
      $(this).toggleClass("highlight");
    });
  });
  </script>
  <style>
  p { margin: 4px; font-size:16px; font-weight:bolder; 
      cursor:pointer; }
  .blue { color:blue; }
  .highlight { background:yellow; }
  </style>
</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>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

מוסיף class 'highlight' אם אין אותו, ומוחק אם יש אותו בכל לחיצה שלישית.

    var count = 0;
    $("p").click(function(){
      $(this).toggleClass("highlight", count++ % 3 == 0);
    });

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 2 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
    var count = 0;
    $("p").click(function(){
      $(this).toggleClass("highlight", count++ % 3 == 0);
    });
  });
  </script>
  <style>
  p { margin: 4px; font-size:16px; font-weight:bolder; 
      cursor:pointer; }
  .blue { color:blue; }
  .highlight { background:red; }
  </style>
</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>
</body>
</html>

נסה זאת בעצמך

האם מידע זה היה מועיל?

כן לא

toggleClass()

.toggleClass( className )

.toggleClass( className )

.toggleClass( className, switch )

.toggleClass( function(index, class), [switch] )

דוגמאות

דוגמה 1

דוגמה 1 - קוד מלא:

דוגמה 2

דוגמה 2 - קוד מלא:

תגובות