محمدمتین بهمنی
3 سال پیش توسط محمدمتین بهمنی مطرح شد
7 پاسخ

حذف کلاس در جاوا اسکریپت و ادد کردن دوباره آن با addlinser چطوریه

سلام یه مشکلی دارم
یعنی اینکه وقتی می خوام یه کلاس رو حذف کنم و یه کلاس دیگه ای رو جایگزین کنم با جاوا اسکریپت بلد نیستم کسی بلد هست

مثلا document.ایدی.classlist.add(color)

و زیرش همین رو remove می کنم کار نمیکنه

با چی باید این قابلیت رو هندل کنم

شرط هم هرچی فکر می کنم نمی دونم چی بزارم تا درست اجرا کنه.

اگر بگید ممنون میشم.


ثبت پرسش جدید
معین
تخصص : برنامه نویس
@mindofasync 3 سال پیش مطرح شد
-1

شاید دارم دیر جواب میدم. ولی من از این روش استفاده می کنم.
contains چک می کند که عنصر انتخابی شما (btn) دارای کلاس مورد نظر هست یاخیر.

const btn=document.querySelector('.my-btn')
btn.addEventListener("click",()=>{
         if(btn.classList.contains('my-class')){
               btn.classList.remove('my-class')
       }
        else{
              btn.classList.add('my-class')
            }
}

mimv
تخصص : هیچی
@mimV 3 سال پیش آپدیت شد
1

اگه کدتون رو بذارید بهتره.. در کل جایگزین کردن کلاس توی جاوااسکریپت اینطوریه:

div.classList.replace("foo", "bar");

اون یه خط کدی که نوشتید هم باید بصورت classList باشه.
این صفحه رو ببینید.


محمدمتین بهمنی
تخصص : web developer
@mmatinbahmani 3 سال پیش آپدیت شد
-1

link github
اون گوشه وقتی کلیک میکنی روی هر رنگی تا رنگ بک گراند رو عوض کنه وقتی inspaket میکنی متوجه میشی که چند تا کلاس bg میگیره من میخوام هر وقت کلیک کرد این رنگ که کلاس هست با اون کلاسه جابه جا بشه.


Meysam
تخصص : ++ C
@meysampro 3 سال پیش مطرح شد
mimv
تخصص : هیچی
@mimV 3 سال پیش آپدیت شد
-1

سلام، شما اول باید کلاس رنگ قبلی رو ذخیره کنید و بعد با کلاس جدید جایگزینش کنید.

Array.from(themes.children).forEach(theme => {
            theme.addEventListener("click", e => {
                var color = e.target.dataset.color

                let colors = document.querySelector("#selecttheme")

                if (colors.classList.contains(selecttheme)) {
                    colors.classList.remove(selecttheme)
                }
                colors.classList.add(color)

                localStorage.setItem("theme", color);
                selecttheme = color;
            })
        })

محمد حسین
تخصص : mevn stack
@saghari 3 سال پیش مطرح شد
-1

باید color را 'color' یا "color" بنویسی، یعنی بذاریش توی کوت یا دابل کوت. چون اگه نذاری جاوا اسکریپت فکر میکنه اینها متغیرند و دنبال متغیر color میگرده ولی اون را پیدا نمیکنه و ارور میده.


عبدالرحمان کیانی
تخصص : Backend developer
@abdolrahman 3 سال پیش مطرح شد
-2
element.className = element.className.replace('Your class' , 'Your class to replace')

معین
تخصص : برنامه نویس
@mindofasync 3 سال پیش مطرح شد
-1

شاید دارم دیر جواب میدم. ولی من از این روش استفاده می کنم.
contains چک می کند که عنصر انتخابی شما (btn) دارای کلاس مورد نظر هست یاخیر.

const btn=document.querySelector('.my-btn')
btn.addEventListener("click",()=>{
         if(btn.classList.contains('my-class')){
               btn.classList.remove('my-class')
       }
        else{
              btn.classList.add('my-class')
            }
}

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام