تغییر Class تگ های Html دارای Data-Attribute توسط جی کویری
11:30:00 PM - 1401/02/08
یک سوال دارم امیدوارم بتونم به درستی منظورم رو بیان کنم. یک لیستی از محصولات رو تو یک View نمایش میدم. هر محصول یک دکمه افزودن به سبد خرید داره. تصویر زیر :
دکمه سبد خرید که در تصویر مشخص کردم در واقع یک تگ a هستن. به صورت زیر :
<a href="#" class="pluscat" data-id="@item.ID" style="background-color: green; padding-top:2px; color: white; border-radius: 50px; width: 18px; height: 18px; text-align: center;">
<i class="fa fa-plus"></i>
</a>
همونطور که مشخص هست از data-id استفاده کردم برای هر دکمه.
مشکل :
خب حالا من می خوام روی هر دکمه که کلیک شد اون دکمه (تگ a) مخفی بشه و یک دکمه دیگه به صورت زیر جایگزین بشه.
کد Html مربوط به دکمه جدید هم به صورت زیر نوشتم :
<a href="#" class="minuscat hidden" data-ID2="@item.ID" style="background-color: red; padding-top:2px; color: white; border-radius: 50px; width: 18px; height: 18px; text-align: center;">
<i class="fa fa-minus"></i>
</a>
در دکمه جدید از data-ID2 استفاده شده
به این سوال امتیاز بدهید
0
تعداد بازدید این سوال : 2208
پاسخ دهنده : saedbfd
11:35:00 PM - ۱۴۰۱/۰۲/۰۸
شما می تونید توسط کدهای جی کوئری زیر این کار رو انجام بدید.
$(".pluscat").on('click', function (e) {
e.preventDefault();
var getVal = $(this).data("ID");
$("[data-ID='" + getVal + "']").hide();
$(`.minuscat[data-ID2=${getVal}]`).removeClass('hidden');
});
در کدهای بالا به علائم دقت کنید. در بعضی قسمتها کوتیشن (') و در برخی قسمتها دابل کوتیشن (") و در برخی قسمت ها از (`) استفاده شده.
آموزشهای پرطرفدار
سوالات مشابه
|
تاریخ :
1403/02/19
- ساعت :
01:52:00 PM
- بازدید :
45
- پاسخ :
1
|
|
تاریخ :
1400/11/14
- ساعت :
12:23:00 AM
- بازدید :
2290
- پاسخ :
2
|
|
تاریخ :
1402/01/26
- ساعت :
03:38:00 PM
- بازدید :
965
- پاسخ :
1
|
|
تاریخ :
1402/11/13
- ساعت :
12:48:00 AM
- بازدید :
539
- پاسخ :
4
|
|
تاریخ :
1398/09/21
- ساعت :
09:53:00 AM
- بازدید :
5286
- پاسخ :
7
|
|
تاریخ :
1402/08/04
- ساعت :
05:01:00 PM
- بازدید :
531
- پاسخ :
1
|
|
تاریخ :
1402/08/06
- ساعت :
01:20:00 PM
- بازدید :
540
- پاسخ :
1
|
|
تاریخ :
1402/08/01
- ساعت :
06:25:00 PM
- بازدید :
642
- پاسخ :
1
|
|
تاریخ :
1402/07/25
- ساعت :
09:15:00 PM
- بازدید :
770
- پاسخ :
1
|
|
تاریخ :
1399/12/13
- ساعت :
12:10:00 AM
- بازدید :
3076
- پاسخ :
1
|
آخرین سوالات ارسالی
|
تاریخ :
1403/02/24
- ساعت :
04:40:00 PM
- بازدید :
64
- پاسخ :
2
|
|
تاریخ :
1403/02/23
- ساعت :
02:24:00 PM
- بازدید :
109
- پاسخ :
5
|
|
تاریخ :
1403/02/25
- ساعت :
04:38:00 PM
- بازدید :
53
- پاسخ :
1
|
|
تاریخ :
1403/02/16
- ساعت :
01:25:00 PM
- بازدید :
146
- پاسخ :
4
|
|
تاریخ :
1403/02/20
- ساعت :
06:33:00 PM
- بازدید :
91
- پاسخ :
1
|
|
تاریخ :
1403/01/17
- ساعت :
08:30:00 PM
- بازدید :
271
- پاسخ :
3
|
|
تاریخ :
1401/11/15
- ساعت :
11:17:00 AM
- بازدید :
1215
- پاسخ :
1
|
|
تاریخ :
1402/04/01
- ساعت :
06:17:00 PM
- بازدید :
1158
- پاسخ :
0
|
|
تاریخ :
1403/02/20
- ساعت :
12:29:00 AM
- بازدید :
61
- پاسخ :
1
|
|
تاریخ :
1403/02/19
- ساعت :
11:43:00 AM
- بازدید :
76
- پاسخ :
1
|
پاسخ خود را ثبت نمایید ...
برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید.
ورود به سایت