JavaScript ဖြင့် အရာဝတ္ထုများစွာကို ခလုတ်များဖြင့် ပြသခြင်း

ယခု စာပိုဒ်များစွာရှိပြီး ၎င်းတစ်ခုစီအတွက် ဝှက်ရန် သီးခြားခလုတ်တစ်ခုစီရှိသည်ဟု ဆိုကြပါစို့။

<p>1</p><button>toggle</button>
<p>2</p><button>toggle</button>
<p>3</p><button>toggle</button>

ခလုတ်တစ်ခုကို နှိပ်လိုက်သောအခါ ၎င်းနှင့် သက်ဆိုင်ရာ စာပိုဒ်ကို ဝှက်ရန် သို့မဟုတ် ပြသရန် လုပ်ဆောင်ပေးရန် ဖြစ်ပါသည်။

ဤအတွက် ခလုတ်များနှင့် စာပိုဒ်များကို ဆက်သွယ်ရန် နည်းလမ်းအချို့ လိုအပ်ပါသည်။ ယင်းအတွက် နည်းလမ်းများစွာရှိပါသည်။

ပထမနည်းလမ်း

ခလုတ်များနှင့် စာပိုဒ်များကို အောက်ပါအတိုင်း ဆက်သွယ်ပါမည်။

<p id="elem1">1</p><button data-elem="elem1">toggle</button>
<p id="elem2">2</p><button data-elem="elem2">toggle</button>
<p id="elem3">3</p><button data-elem="elem3">toggle</button>

ယခုအခါ မည်သည့်ခလုတ်ကို နှိပ်လိုက်ပါက ယင်း၏ data-elem attribute တွင်ပါရှိသော စာသားကိုဖတ်ပြီး ထို id နှင့် စာပိုဒ်ကို ရှာဖွေပါမည်။ ၎င်းကို toggle လုပ်ပါမည်။ ဖော်ပြထားသည်ကို အကောင်အထည်ဖော်ပါမည်။

let buttons = document.querySelectorAll('button');

for (let button of buttons) {
	button.addEventListener('click', function() {
		let elem = document.querySelector('#' + this.dataset.elem);
		elem.classList.toggle('hidden');
	});
}

ကျွန်ုပ်၏ဖြေရှင်းချက်ကို လေ့လာပြီးနောက်၊ ကျွန်ုပ်၏ကုဒ်ကို မကြည့်ဘဲ ဤပြဿနာကို ကိုယ်တိုင်ဖြေရှင်းပါ။

ဒုတိယနည်းလမ်း

id များနှင့် data-attributes များကို သတ်မှတ်ခြင်းသည် အဆင်မပြေလှပါ။ အစဉ်လိုက် နံပါတ်ဖြင့် ဆက်သွယ်မှုကို ပြုလုပ်ကြပါစို့။ ပထမခလုတ်သည် ပထမစာပိုဒ်ကို ဝှက်ပစ်ရန်၊ ဒုတိယခလုတ်သည် ဒုတိယစာပိုဒ်ကို ဝှက်ပစ်ရန် စသဖြင့် ဖြစ်ပါစေ။

ဖော်ပြထားသည်ကို အကောင်အထည်ဖော်ပါမည်။

let buttons = document.querySelectorAll('button');
let elems   = document.querySelectorAll('p');

for (let i = 0; i < buttons.length; i++) {
	buttons[i].addEventListener('click', function() {
		elems[i].classList.toggle('hidden');
	});
}

တတိယနည်းလမ်း

မြင်တွေ့နိုင်သည့်အတိုင်း၊ ခလုတ်နှင့် ဆက်စပ်နေသော စာပိုဒ်သည် ၎င်း၏ ဘယ်ဘက်အိမ်နီးချင်း ဖြစ်သည်။ ဆက်သွယ်မှုအဖြစ် ဤအချက်ကို အသုံးပြုနိုင်ပါသည်။

let buttons = document.querySelectorAll('button');

for (let button of buttons) {
	button.addEventListener('click', function() {
		this.previousElementSibling.classList.toggle('hidden');
	});
}