💻 آخرین فرصت یادگیری برنامه‌نویسی با آفر ویژه قبل از افزایش قیمت در ۵ آذر ماه (🎁 به همراه یک هدیه ارزشمند )
۰ ثانیه
۰ دقیقه
۰ ساعت
۴ ‌
ناسازگاری بستن خودکار همه‌ی toast‌ها با بستن تکی آنها
جامعه Html & CSS ایجاد شده در ۲۶ مهر ۱۴۰۳

درود

می‌خواستم بدونم چرا زمان استفاده از کد جی کوئری برای بستن خودکار toast ها، دیگه کد بستن جداگانه (تکی) کار نمیکنه.

یعنی به طور همزمان از هر دو حالت انتخابی و خودکار برای بستن toast‌ها نمیشه استفاده کرد.

https://codepen.io/Sotoodeh1000ian/pen/BaXRbdv

سلام،

کد زیرو حذف یا کامنت کنید: (بخاطر همین کد هست که بعد 5 ثانیه toast حذف میشه)

$(".toast").delay(5000).hide("slow", function () {
    $(this).remove();
});
محسن موحد ۲۷ مهر ۱۴۰۳، ۲۲:۲۷

ولی من میخوام هر دو حالت رو هم زمان با هم داشته باشم

تا قبل از 5 ثانیه کاربر هر toastی رو که میخواد ببنده و بقیه هم در ثانیه پنجم خودکار بسته بشن

۲۸ مهر ۱۴۰۳، ۰۵:۳۵

کدتون رو کمی تغییر دادم:

$(document).ready(function () {
  $(document).on("click", ".toast-close", function (e) {
    e.preventDefault();
    $(this).closest(".toast").fadeOut("slow", function () {
      $(this).remove();
    });
  });
  setTimeout(function() {
    $(".toast").each(function() {
      if ($(this).is(":visible")) {
        $(this).fadeOut("slow", function () {
          $(this).remove();
        });
      }
    });
  }, 5000);
});

از setTimeout برای اینکه بعد از 5 ثانیه کاری انجام بده استفاده شد. (داخلش چک میشه اونهایی که هنوز حذف نشدن)

برای کلیک، این مدل حالت لایو هست که حتی اگر در شرایطی بصورت لایو المانی اضافه شود، دکمه کلیک روی المان جدید هم کار میکند از این طریق. ضمنا اینجا چون دکمه بستن یک div هست و این تگ رفتار خاصی نداره و مثه تگ a یا دکمه سابمیت نیست، نیازی به وجود دستور e.preventDefault(); نیست.

محسن موحد ۲۹ مهر ۱۴۰۳، ۰۰:۳۶

1_ حالت لایو کلیک یعنی چی؟

2_ میشه قسمت setTimeout رو به صورت chaining و خلاصه‌تر نوشت؟

۰۵ آبان ۱۴۰۳، ۱۲:۱۹