Onclicksda kodimni pastga tushirishning eng yaxshi usuli

Men ko'pincha javascript/jquery-da yaxshi emasman, lekin ishlash uchun qanday dasturiy ta'minotni olishni bilaman. Lekin mening masala shundaki, menda ko'p narsa bor

$("body").on("click", "button#thisid", function(event) {
    //do stuff here
});

Jquery postidan foydalanadigan va funktsiyalarga ega bo'lgan sekin urishlarning bir nechta varianti bor, lekin ularning barchasida kichik va oddiy farqlar bor. Har bir tugmani onclick hodisasi bo'lishini istamayman, lekin hodisani biriktirilgan bo'lishi kerak bo'lgan elementlarning katta ro'yxatiga qanday bog'lashni amin emasman.

Men bularning barchasini yupatish uchun biron-bir yo'lni o'ylab topishga harakat qilaman, lekin baribir butun bir guruh halokat o'rniga eng yaxshi yondoshishni xohlayman. Shuning uchun meni to'g'ri yo'ldan ozdirish uchun mendan ko'proq biladigan odamlarga murojaat qilaman.

Iltimos yordam bering

0
Eng yaxshi usul, bir necha marta bosish orasida qanday funktsiyani sinxronlash ekanligini aniqlashdir. Agar o'xshash funksiyalar mavjud bo'lsa, ID o'rniga class ni belgilashingiz mumkin. Iltimos, qolgan kodni joylashtirasizmi?
qo'shib qo'ydi muallif Obsidian Age, manba
Eng yaxshi usul, bir necha marta bosish orasida qanday funktsiyani sinxronlash ekanligini aniqlashdir. Agar o'xshash funksiyalar mavjud bo'lsa, ID o'rniga class ni belgilashingiz mumkin. Iltimos, qolgan kodni joylashtirasizmi?
qo'shib qo'ydi muallif Obsidian Age, manba
berilgan ma'lumot bilan uni qanday qilib yaxshilash kerakligini aytib berishning iloji yo'q.
qo'shib qo'ydi muallif epascarello, manba
berilgan ma'lumot bilan uni qanday qilib yaxshilash kerakligini aytib berishning iloji yo'q.
qo'shib qo'ydi muallif epascarello, manba
berilgan ma'lumot bilan uni qanday qilib yaxshilash kerakligini aytib berishning iloji yo'q.
qo'shib qo'ydi muallif epascarello, manba
@ObsidianAge Men bu yo'nalishlarni o'ylay boshladim, lekin u eng samarali usul ekanini bilmadim. Afsuski, kodni joylashtira olmayman, garchi men yaxshi bo'lishga yordam berishni xohlayman. Bundan tashqari, plagin yoki faqat bitta sinf turi kabi o'ylashim kerakmi, amin emas edim.
qo'shib qo'ydi muallif itisnot_me, manba
@ObsidianAge Men bu yo'nalishlarni o'ylay boshladim, lekin u eng samarali usul ekanini bilmadim. Afsuski, kodni joylashtira olmayman, garchi men yaxshi bo'lishga yordam berishni xohlayman. Bundan tashqari, plagin yoki faqat bitta sinf turi kabi o'ylashim kerakmi, amin emas edim.
qo'shib qo'ydi muallif itisnot_me, manba
@ObsidianAge Men bu yo'nalishlarni o'ylay boshladim, lekin u eng samarali usul ekanini bilmadim. Afsuski, kodni joylashtira olmayman, garchi men yaxshi bo'lishga yordam berishni xohlayman. Bundan tashqari, plagin yoki faqat bitta sinf turi kabi o'ylashim kerakmi, amin emas edim.
qo'shib qo'ydi muallif itisnot_me, manba

6 javoblar

Sizning elementlaringiz dinamik ravishda AOK qilinganligini hisobga olganda, kliklash ishlovchilarini sahifa yukida doimo mavjud bo'lgan elementga qo'llashingiz kerak bo'ladi:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function() {
  $(document).on("click", "button.target", function() {
    console.log($(this)[0].id);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="1" class="target">One</button>
<button id="2" class="target">Two</button>
</div> </div>

Yuqoridagi misolda sekin urish moslamasi document ga qo'llaniladi va funktsiyaning ichidagi kodni ishlasa target sinfiga ega tugma elementi bosilganda tetiklanadi.

.get() va .post() funktsiyalarini birlashtirish uchun siz ham ma'lumotlaringizni topishingiz kerak. $ (this) ga kirishingiz mumkinligini yodda tuting, shunda kerakli identifikatorni ajratib olishingiz mumkin :)

Umid qilamanki bu yordam!

1
qo'shib qo'ydi

Sizning elementlaringiz dinamik ravishda AOK qilinganligini hisobga olganda, kliklash ishlovchilarini sahifa yukida doimo mavjud bo'lgan elementga qo'llashingiz kerak bo'ladi:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function() {
  $(document).on("click", "button.target", function() {
    console.log($(this)[0].id);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="1" class="target">One</button>
<button id="2" class="target">Two</button>
</div> </div>

Yuqoridagi misolda sekin urish moslamasi document ga qo'llaniladi va funktsiyaning ichidagi kodni ishlasa target sinfiga ega tugma elementi bosilganda tetiklanadi.

.get() va .post() funktsiyalarini birlashtirish uchun siz ham ma'lumotlaringizni topishingiz kerak. $ (this) ga kirishingiz mumkinligini yodda tuting, shunda kerakli identifikatorni ajratib olishingiz mumkin :)

Umid qilamanki bu yordam!

1
qo'shib qo'ydi

Yaxshilab topishim kerak bo'lgan har bir tugmani bitta qatorga ega:

$('#model').on('click', openModel());
$('#openDropdown').on('click', openDropdown());
$('#shoppingCart').on('click', shoppingCart());

Va keyin bu funktsiyalarning har birini belgilash:

function openModel() {
   //Stuff here
}

function openDropdown() {
   //Stuff here
}

function shoppingCart() {
   //Stuff here
}

Shunday qilib, funksiyani parametr sifatida yozish o'rniga, uni faqatgina alohida bajarish va yuqorida aytilganidek, uni yoqing.

0
qo'shib qo'ydi
U har bir element uchun bir marta bosishni boshqarishni istamaydi.
qo'shib qo'ydi muallif Obsidian Age, manba

Yaxshilab topishim kerak bo'lgan har bir tugmani bitta qatorga ega:

$('#model').on('click', openModel());
$('#openDropdown').on('click', openDropdown());
$('#shoppingCart').on('click', shoppingCart());

Va keyin bu funktsiyalarning har birini belgilash:

function openModel() {
   //Stuff here
}

function openDropdown() {
   //Stuff here
}

function shoppingCart() {
   //Stuff here
}

Shunday qilib, funksiyani parametr sifatida yozish o'rniga, uni faqatgina alohida bajarish va yuqorida aytilganidek, uni yoqing.

0
qo'shib qo'ydi
U har bir element uchun bir marta bosishni boshqarishni istamaydi.
qo'shib qo'ydi muallif Obsidian Age, manba

Yaxshilab topishim kerak bo'lgan har bir tugmani bitta qatorga ega:

$('#model').on('click', openModel());
$('#openDropdown').on('click', openDropdown());
$('#shoppingCart').on('click', shoppingCart());

Va keyin bu funktsiyalarning har birini belgilash:

function openModel() {
   //Stuff here
}

function openDropdown() {
   //Stuff here
}

function shoppingCart() {
   //Stuff here
}

Shunday qilib, funksiyani parametr sifatida yozish o'rniga, uni faqatgina alohida bajarish va yuqorida aytilganidek, uni yoqing.

0
qo'shib qo'ydi
U har bir element uchun bir marta bosishni boshqarishni istamaydi.
qo'shib qo'ydi muallif Obsidian Age, manba

Men siz nima qilishni xohlayotganingizni aniq bilmayman ... Ammo $ ("body") sizning tinglovchilaringiz qaysi qismlarga bog'langanligini belgilaydigan jquery-ni tanlang.

Shunday qilib, agar siz turli xil elementlar uchun tinglovchilarni yaratmoqchi bo'lsangiz, ehtimol, eng oson echim, tinglovchiga javob berishni istagan har bir elementga bergan "tingedElement" kabi sinf yaratadi va bu kabi selektorni yozish

$('.listenedElement').on( "click", function() {});

If you just look for click listeners this one looks pretty nice as well: https://api.jquery.com/click/

0
qo'shib qo'ydi
ba'zi narsalarim dinamikdir, shuning uchun tugmalar har doim ham sahifa yukida ko'rsatilmaydi. Men tugmani bosish uchun tanani tinglayman. Bundan tashqari, har qanday tugmachaga har qanday ma'lumot tegini (ma'lumotlar-id, ma'lumotlar turi) biriktirishni xohlamayman. Buning atrofida yana bir yo'lni ko'rasizmi?
qo'shib qo'ydi muallif itisnot_me, manba
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb