یلدا ادامه داره... ❤️ ۴۰ درصد تخفیف همه دوره‌ها

استفاده از تخفیف‌ها
ثانیه
دقیقه
ساعت
روز
رایموند
3 سال پیش توسط رایموند مطرح شد
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')
      })

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


ثبت پرسش جدید
Matin
تخصص : React Developer
@matin16236 3 سال پیش مطرح شد
0
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 3 سال پیش آپدیت شد
0

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

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 3 سال پیش مطرح شد
0

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


محمد رستمی
تخصص : طراح و برنامه نویس وب
@mohammadphp 3 سال پیش مطرح شد
0

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


رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 3 سال پیش مطرح شد
0

@mohammadphp

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


محمد رستمی
تخصص : طراح و برنامه نویس وب
@mohammadphp 3 سال پیش مطرح شد
0

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


رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 3 سال پیش مطرح شد
0

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


Matin
تخصص : React Developer
@matin16236 3 سال پیش مطرح شد
0
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');

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


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

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