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

30/05/06 תחת קוד.

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

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

העברת פרמטרים

הפרמטר הראשון שאני מעביר בקריאה לפונקציה הוא ה-id של האובייקט או האובייקטים בצורת מערך, למשל-
בדוגמא זו אני רוצה לבצע את הפעולה על האובייקטים ‘foo’ ו- ‘bar’.
שמות האובייקטים מופרדים בפסיק והם מועברים כמחרוזת לכן כל אחד מהם עטוף במרכאות והאיבר כולו עטוף בסוגריים מרובעים, המכריזים על המשתנה כמערך.

['foo','bar']

הפרמטר השני שאני מעביר הוא סוג הפעולה שאני רוצה לבצע. ישנן שלוש אפשרויות:

  • show הצגת אובייקט
  • hide הסתרת אובייקט
  • toggle היפוך התצוגה של אובייקט, מ-show ל- hide וההיפך

וכולם ביחד

קריאה לפונקצייה יכולה להראות כך:

showHide(['foo','bar'],'show')

או בדוגמה מהחיים:

<a href="#" onClick="showHide(['foo','bar'],'show')">Peek-A-Boo</a>

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

והפונקציה עצמה: (תנוח לה בחדווה בין תגיות ה-HEAD)

<script>
function showHide(ids,action) {
  for (var i=0;i < ids.length;i++) {
    var elm = document.getElementById(ids[i]);
    if (action=='show') {elm.style.display = ''};
    if (action=='hide') {elm.style.display = 'none'};
    if (action=='toggle') {
      elm.style.display = (elm.style.display=='none') ? '' : 'none';
    }
  }
}
</script>

זהו, תהנו!

8 תגובות

תגובה חדשה