היי חברים,
אני עוזר לחבר לבנות אתר one page פשוט מאוד שמתבסס על bootstrap וjquery, כאשר רוב מהות האתר תהיה להציג "פורטפוליו" של המוצרים שהוא מכין (לצורך העניין, בירה)..
הרעיון כרגע הוא שיש 8 בלוקים שמציגים תמונה קטנה של הבירה ואת השם שלה, משהו כזה:
<div class="col-md-4 no_padding">
<a href="" data-toggle="modal" data-target="#viewBeerModal" class="view-modal">
<div class="single_image">
<img src="images/w5.jpg" alt="">
<div class="image_overlay">
<h2>Beer1</h2>
<h4>Such a great beer</h4>
</div>
</div>
</a>
</div>
|
כאשר בלחיצה על כל אחד מהמוצרים ייפתח modal שיציג את המידע הבסיסי על המוצר שנבחר: שם, תיאור קצר, אחוז אלכוהול, רכיבים וכן כמה תמונות שיוצגו בקרוסלה.עכשיו, כיוון שסך הכל ישנם 8 מוצרים, וכולם בעצם כוללים את אותם "שדות", לא היה נראה לי הגיוני ליצור שכפול של הmodal הזה 8 פעמים וכל פעם להציג אחד אחר, אלא ליצור אותו רק פעם אחת ולשלוח אליו את הפרמטרים של המוצר שנבחר ואז לעדכן אותו בעזרתם.
מהחיפושים שלי באינטרנט מצאתי 2 דרכים -
הראשונה, שליחת כל פרמטר בשדות data של הלינק שנבחר - כלומר לכל אלמנט a יהיו שדות data-name, data-description וכו', אבל זה נראה לי קצת לא נוח לארגון ושליטה למקרה שיהיה צורך להוסיף\לשנות שדות.
השיטה השניה הייתה כאמור לשכפל את הmodal 8 פעמים וכל פעם להציג אחד אחר, או לחילופין לשכפל 8 פעמים ולשמור את המשכופלים hidden, ובכל לחיצה להעתיק באמצעות js את הפרמטרים מה-div המוסתר לmodal המוצג, אבל גם זה היה נראה לי קצת מיותר..
הכיוון שלי היה יותר משהו בסגנון ליצור לכל מוצר אובייקט ואיכשהו להעביר אותו לפי הלחיצה ואז לעדכן את הmodal..אבל פה לא הסתדרתי מבחינת באיזה scope לשים את המערך של האובייקטים...
אני אשמח לחוות דעת מכם, איך הכי נכון לממש דבר כזה..
תודה מראש
גירסת הדפסה
סגן המנהל
מפקח
Winner
צל"ש
מומחה
