راکت
حل شده

کاهش حجم کد جاوا اسکریپت

7 پاسخ

درود دوستان...
می خوام یه کتابخانه برای منو کردن سایدبار استفاده کنم ولی مشکلی که داره بخواهیم دکمه ها صدا بزنیم باید چند سطر کد ایجاد کنم و همین جوری حجم کد زیاد میشه...
کد HTML
مثلا دو تا دکمه منو ایجاد کردم:

<button id="slide-1-trigger">Slide 1 Trigger</button>
    <div id="slide-1-target">
      Slide 1 content
    </div>
    <button id="slide-2-trigger">Slide 1 Trigger</button>
    <div id="slide-2-target">
      Slide 1 content
    </div>

کد جاوا اسکریپت
برای صدا زدن آن باید دو تا کد زیر با آی دی متفاوت ایجاد کنیم:

document.getElementById('slide-1-trigger').addEventListener('click', async function () {
        await slideToggle(document.getElementById('slide-1-target'));
        console.log('done')
      })
      document.getElementById('slide-2-trigger').addEventListener('click', async function () {
        await slideToggle(document.getElementById('slide-2-target'));
        console.log('done')
      })

حالا اگر بخوام ۱۰ تا دکمه منو ایجاد کنم باید مثل این کد صدا زدن دکمه ها به صورت بنویسم که حجم کد زیاد میشه...
چجوری این ۱۰ تا دکمه بخوام صدا بزنم در یک کد نوشته بشه....

رایموند
رایموند
@Raymond
ثبت پرسش جدید

پاسخ‌ها

7
Matin
Matin
@matin16236

تخصص: React Developer

بهترین پاسخ
function toggle_menu(id , idTarget){
    document.getElementById(id).addEventListener('click', async function () {
        await slideToggle(document.getElementById(idTarget));
        console.log('done')
    })

}
toggle_menu('slide-1-trigger' , 'slide-1-target');
toggle_menu('slide-2-trigger' , 'slide-2-target');

فک کنم اون کد دوستمون قسمت ایدی دوم رو توجه نکردن چون ایدیش فرق میکرد باید یه ورودی دیگه برای اون ایدی هم میگرفتیم
الان فک کنم درسته دیگه

محمد رستمی
محمد رستمی
@mohammadphp

تخصص: طراح و برنامه نویس وب

سلام خب یه فانکشن بسازید و به عنوان ارگومان ایدی منو رو بدید و کدتون رو بزارید تو فانکشن
کد شما

function toggle_menu(id){
    document.getElementById(id).addEventListener('click', async function () {
        await slideToggle(document.getElementById(id));
        console.log('done')
    })

}
toggle_menu('slide-1-trigger')
toggle_menu('slide-2-trigger')
رایموند
رایموند
@Raymond

تخصص: مختصص وردپرس - برنامه نویس لاراول

@mohammadphp
امتحان کردم کار نکرد

شاید پاسخ شما همین‌جا باشد

محمد رستمی
محمد رستمی
@mohammadphp

تخصص: طراح و برنامه نویس وب

کپی کردین؟
اخه یه غلط املایی داشت

رایموند
رایموند
@Raymond

تخصص: مختصص وردپرس - برنامه نویس لاراول

@mohammadphp

آره کد کپی شده..
غلط املایی کدوم کد؟

محمد رستمی
محمد رستمی
@mohammadphp

تخصص: طراح و برنامه نویس وب

function رو اشتباه نوشته بود الان درست کردم

رایموند
رایموند
@Raymond

تخصص: مختصص وردپرس - برنامه نویس لاراول

@mohammadphp
کد کار کرد ولی یه اشکال داره...
این دکمه ها رو hide می کنه و بکگراند صفحه خیر ...
این دو تا باید یک جا عمل کنه

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

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