עזרה | יצירת כפתור שתחליף את הרקע כל פעם לרקע האחר...
-
@איציק-דייטש אולי תנסה
var backgroundImg = document.getElementByClassName('welcome');
לא הבנתי מה זה ה welcome, זה התמונה?
:::
אגב כותבים button ולא bottun
:::
-
@נ-נח אמר בעזרה | יצירת כפתור שתחליף את הרקע כל פעם לרקע האחר...:
לא הבנתי מה זה ה welcome, זה התמונה?
זה קלאס לתמונה...
@נ-נח אמר בעזרה | יצירת כפתור שתחליף את הרקע כל פעם לרקע האחר...:
אגב כותבים button ולא bottun
כן, כבר ערכתי מקודם
@נ-נח אמר בעזרה | יצירת כפתור שתחליף את הרקע כל פעם לרקע האחר...:
@איציק-דייטש אולי תנסה
var backgroundImg = document.getElementByClassName('welcome');
לא זה הבעיה, אני מחפש דרך שזה יחזור על עצמו... ולא פעם אחת שאני מבזבז את הכפתור, ת'מבין?
-
@איציק-דייטש אולי זה?
var button = document.getElementById('change_bg'); button.onclick = function () { $('.welcome').css('backgroundImage', 'url(../images/img2.jpg)') };
-
@איציק-דייטש איפה ששמת את הקוד שלך
חצי גוגל חצי מתמצא... -
@איציק-דייטש מחילה רק עכשיו הבנתי את השאלה..
זה אמור להיות משהו כזה:var backgroundImg = document.querySelector(".welcome"); var button = document.getElementById('change_bg'); button.addEventListener('click', changeBackground); function changeBackground(){ if (backgroundImg.style.backgroundImage === "url(../images/img2.jpg)") { backgroundImg.style.backgroundImage = "url(התמונה הראשונה)"; } else { backgroundImg.style.backgroundImage = "url(../images/img2.jpg)" }};
-
@נ-נח עדיין מחליף רק פעם אחת, נראלי אני מתייאש עד ש @מוטי-אורן או @chv יגיעו...
-
@איציק-דייטש הבעיה היא לכאורה שאתה מסתמך על
backgroundImg.style.backgroundImage
- וזה בכלל תמיד יחזיר סטרינג ריק, כל עוד אין לאלמנט הנבחר תכונתstyle
.
כי ככה עובדelement.style
. (זה מביא רק את הCSS שהוצהרו בתור תכונתstyle
של אלמנטים קיימים ב-HTML. וכמו שתראה בהסבר בתיעוד כאן. תקרא)מה שכן צריך לעשות זה -
הכי מומלץ כמובן לעבוד במקרה כזה עם Jquery שבתוך רגע אתה מקבל את הערך CSS של האלמנט, ובתוך רגע משנה אותו. ככה מקבלים CSS של אלמנט ב-Jquery. לדוגמא קבלת הרקע של ה-body:$( 'body' ).css( 'backgroundImage' )
הבעיה שלנו שכיוון שהערך של
background-image
הוא עם סוגריים + ערך, הפלט שיצא לנו מהשאלה הזו יהיה עם לוכסנים ושאר מרעין בישין -"url(\"https://domain.com/images/sample.jpg\")"
אז אפשר להשתמש ברגקס כדי למחוק אותן, כבר בשלב שמקבלים את הCSS. ככה (מכאן) -
$( 'body' ).css( 'backgroundImage' ).replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')
שורה כזו תחזיר לנו רק את ה-URL של התמונה ברקע.
עכשיו הרי גם אפשר להשתמש ב-Jquery כדי להגדיר את הCSS. כלומר לשנות את התמונה (לא רק לקבל את המידע):
$( 'body' ).css( 'backgroundImage', 'url(https://domain.com/images/secondPicture.jpg)' )
יוצא שפונקציה להחליף תמונה ב-Jquery תהיה ככה בערך:
function changebackground() { let backelement = $( 'body' ).css( 'backgroundImage' ).replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '') if (backelement == 'https://domain.com/images/sample.jpg') { $( 'body' ).css( 'backgroundImage', 'url(https://domain.com/images/secondPicture.jpg)' ) } if (backelement == 'https://domain.com/images/secondPicture.jpg') { $( 'body' ).css( 'backgroundImage', 'url(https://domain.com/images/sample.jpg)' ) } }
אוקיי כל זה עם Jquery. מה אם אתה לא רוצה לעבוד עם זה? (אין באמת עניין. זה רק מקל את החיים לעבוד עם Jquery)
כדי לקבל את ה-style
האמיתי הנוכחי (שכולל גם CSS שלא כתכונתstyle
) תצטרך לקבל דרך פונקציתwindow.getComputedStyle
(תיעוד) ככה בערך זה על הרקע של ה-body:window.getComputedStyle(document.body).backgroundImage
כאשר גם עליו נצטרך להריץ סידור טקסטואלי על ידי רגקס.
(window.getComputedStyle(document.body).backgroundImage).replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')
הבעיה שה-
window.getComputedStyle
הוא רק מה שנקרא 'גטר' הוא לא 'סטר' הוא לא יכול להגדיר דברים, רק לקבל.
אז כדי להגדיר את ה-CSS באמצעות JS צריך פשוט לפנות ישירות לאלמנט -document.body.style.backgroundImage = 'url(https://domain.com/images/sample.jpg)'
כך שפונקציה להחלפת תמונת רקע ב-JS טהורה תיראה בערך כך:
function changebackground() { let backelement = (window.getComputedStyle(document.body).backgroundImage).replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '') if (backelement == 'https://domain.com/images/sample.jpg') { document.body.style.backgroundImage = 'url(https://domain.com/images/secondPicture.jpg)' } if (backelement == 'https://domain.com/images/secondPicture.jpg') { document.body.style.backgroundImage = 'url(https://domain.com/images/sample.jpg)' } }
עוד שאלות?
-
@chv אמר בעזרה | יצירת כפתור שתחליף את הרקע כל פעם לרקע האחר...:
עוד שאלות?
יש לי שאלה - למה שמת שני if במקום if else?
יותר קצרfunction changebackground() { let backelement = $( 'body' ).css( 'backgroundImage' ).replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '') if (backelement == 'https://domain.com/images/sample.jpg') { $( 'body' ).css( 'backgroundImage', 'url(https://domain.com/images/secondPicture.jpg)' ) } else { $( 'body' ).css( 'backgroundImage', 'url(https://domain.com/images/sample.jpg)' ) } }
-
-
@איציק-דייטש אמר בעזרה | יצירת כפתור שתחליף את הרקע כל פעם לרקע האחר...:
אני גם לא מרוצה מהאחרון שנתת לי
אבל הוא לא Jquery
אני לא רואה איך מפעילים את הפונקציה ע"י הכפתור
כמו שעשית - על ידי listener
או פשוט בתכונה באלמנט של הכפתור -"()onclick="changebackground
-
@איציק-דייטש אמר בעזרה | יצירת כפתור שתחליף את הרקע כל פעם לרקע האחר...:
מה זה???
כמו שכתבתי - זה רגקס regex - קיצור של regular expression.
זו דרך לנתח, לשנות ולסדר טקסט על ידי תוכנה על פי כללים טקסטואליים.
https://גוגל-בפורומים.tk/#gsc.tab=0&gsc.q=רגקסאני לא מכיר את זה מהלימודים
אני יכול לומר לך שאם תלך רק אחרי מה שמלמדים אותך, יכול לקחת לך המון זמן להגיע לתוצאות.. גוגל הכי טוב.
-
@chv למה שהוא לא יעשה משהו כזה? (זה אותו רעיון כמו ש @נ-נח הביא, אבל עם פיתרון לבעיה שהזכרת)
var backgroundImg = document.getElementsByClassName('welcome')[0]; var button = document.getElementById('change_bg'); var whichImage = 1; button.addEventListener('click', changeBackground); function changeBackground() { if (whichImage === 1) { backgroundImg.style.backgroundImage = 'url(התמונה השניה)'; whichImage = 2; } else { backgroundImg.style.backgroundImage = 'url(התמונה הראשונה)'; whichImage = 1 } }
-
@מוטי-אורן צודק.
אתה אומר - מה אני צריך לדעת איזו תמונה נמצאת שם ברקע עכשיו. זה לא משנה - העיקר להכניס תמונה לרקע (כי היוזר לחץ על הכפתור)
יותר נכון - אין צורך כנראה לבדוק מה התמונת רקע בהתחלה כי אנחנו כנראה כבר יודעים את זה. מי שכותב את האתר.ויש לך רעיון חמוד לבצע toggle בצורה גנרית.. (זה רעיון ממש פשוט וחכם! וזה יכול להיות שימושי מאוד אם רוצים לעשות מין toggle כזה אבל לא להשקיע יותר מידי. החכמתני)
-
@chv אמר בעזרה | יצירת כפתור שתחליף את הרקע כל פעם לרקע האחר...:
אנחנו כנראה כבר יודעים את זה
בדיוק!!
@איציק-דייטש שים לב להסבר: אם וכאשר היית כותב את הסקריפט בלי לדעת איזו תמונת רקע אתה צריך להחליף, אז היית חייב רגקס (כמו ש @chv כתב). אבל במקרה דנן אתה לא צריך למצוא את התמונת רקע המקורית עם הסקריפט, כי אתה כבר יודע (מן הסתם) איזו תמונה שמת שם. ולכן הסקריפט שהבאתי לעיל אמור להספיק.
-
@chv @מוטי-אורן וואו, אני נדהם כל פעם מהצורה שבה אתם מסבירים, תודה רבה!!!!
@chv אמר בעזרה | יצירת כפתור שתחליף את הרקע כל פעם לרקע האחר...:
אני יכול לומר לך שאם תלך רק אחרי מה שמלמדים אותך, יכול לקחת לך המון זמן להגיע לתוצאות.. גוגל הכי טוב.
אתה צודק בהחלט, אבל במקרה שלי אני עושה את השיעורי בית, אז אני לא רוצה להשקיע בזה, במקרים אחרים אני כן יצא מהמסגרת...
@מוטי-אורן אמר בעזרה | יצירת כפתור שתחליף את הרקע כל פעם לרקע האחר...:
@איציק-דייטש שים לב להסבר: אם וכאשר היית כותב את הסקריפ...
תודה רבה!!
אוקיי, תוך כדי כתיבת התגובה, בדקתי את מה ש @מוטי-אורן הביא ... ו...
כל הכבוד!!
תודה רבה!!
-
א אלישי העביר נושא זה מ-JavaScript ES6 ב-