hide نشدن آیکون لودینگ به علت کلاس fas

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

با سلام و احترام

من کد رو دقیقا مثل استاد نوشتم ولی آیکون لودینگ هاید نشد.

در نتیجه سعی کردم به این صورت بنویسم

.loading{
    display: none !important;
}

در ابتدا آیکون هاید شد ولی دیگه نشد با جی کوئری show کنم.

متوجه شدم که خود کلاس fas به پرارپتی display داره مقدار inline-block و به همین دلیل نتونستم با روش استاد hide & show کنم

درخواست راهنمایی داشتم

با تشکر

با سلام و احترام

من کد رو دقیقا مثل استاد نوشتم ولی آیکون لودینگ هاید نشد.

در نتیجه سعی کردم به این صورت بنویسم

.loading{
    display: none !important;
}

در ابتدا آیکون هاید شد ولی دیگه نشد با جی کوئری show کنم.

متوجه شدم که خود کلاس fas به پرارپتی display داره مقدار inline-block و به همین دلیل نتونستم با روش استاد hide & show کنم

درخواست راهنمایی داشتم

با تشکر

صادق گوهریان ۱۶ مرداد ۱۴۰۲، ۲۱:۲۸

سلام،

سورس کدتون رو روی codepen.io یا jsfiddle.net قرار بدید تا بررسی بشه.

محسن موحد ۱۸ مرداد ۱۴۰۲، ۰۷:۳۱

https://codepen.io/sadegh-goharian/pen/qBQGRye

پیشاپیش ممنونم بابت بررسی و راهنماییتون

صادق گوهریان ۱۸ مرداد ۱۴۰۲، ۰۹:۴۵

سلام،

بله همانطور که گفتید از کلاس fas ویژگی inline-block رو میگیره شما میتونید loading رو از کلاس حذف کنید و id="loading" بدید تا ترتیب اولویت تغییر کند. آیدی بالاتر قرار میگیرد.

و داخل جی کوئری هم #loading رو show کنید.

یا اینکه میتوانید دستور جی کوئری قبل از کلیک hide کنید و بعد از کلیک show بشه. چون این عمل hide بعد از لود کامل صفحه و اعمال css‌ها انجام میشود:

j('.loading').hide();
j('#submit').on('click',function (e) {
    e.preventDefault();
    j('.loading').show();
    // ...

بهترین پاسخ

محسن موحد ۱۸ مرداد ۱۴۰۲، ۱۲:۲۸