دکمه ی لایک
سلام وقتتون بخیر
من یه دکمه ی لایک دارم توی صفحه،EventListener اولی رو نوشتم،که وقتی کاربر روش میزنه تغییر ظاهری روش اعمال بشه،اما نمیدونم چه کدی باید بنویسم که اگه کاربر پشیمون شد و خواست unlike کنه،دکمه به حالت اولیش برگرده
ممنون میشم اگه راهنمایی کنید.
ممنون
این کد رو براساس کد شما آماده کردم، به بخش انتخاب عناصر و پیمایش عناصر انتخاب شده دقت کنید، متوجه تفاوت ها میشید.
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>all btn click</title>
<style>
.liked{
background-color: #fa2276;
color: white;
}
</style>
</head>
<body>
<button class="like-btn btn btn-sm btn-pink text-white">Like</button>
<button class="like-btn btn btn-sm btn-pink text-white">Like</button>
<button class="like-btn btn btn-sm btn-pink text-white">Like</button>
<script>
document.querySelectorAll('.like-btn').forEach(item => {
item.addEventListener('click', event => {
//handle click
toggleLike(item);
if (item.classList.contains('liked')){
item.textContent = 'Unlike'
}else {
item.textContent = 'Like'
}
})
})
function toggleLike(item) {
item.classList.toggle('liked')
}
</script>
</body>
</html>
@hadisematloob درود
اگر از jquery استفاده میکنید $(this).hasClass('liked') میتونه گزینه خوبی باشه
در حالت کلی زمانی که کلیک انجام شد شما چک میکنید class liked وجود داشت اگر وجود داشت اکشن دیسلایک هست و اگر وجود نداشت اکشن لایک هست. اگر هم از jquery استفاده نمیکنید میتونید با this.classList استفاده کنید
اگر ابهامی هست بفرمایید
https://www.w3schools.com/howto/howtojstoggleclass.asp
یک کلاس باید بنویسید، به کمک تابع toggle (به معنای کلید تغییر حالت) این کلاس رو به عنصر اضافه/حذف می کنید.
(به جی کوئری هم نیازی نیست)
@milad خیلی ممنون
با toggle درست کردم،اما فقط دکمه ی اولی که این کلاس رو داره کار میکنه،رو بقیه ی دکمه ها کار نمیکنه
@hadisematloob
زنده باشید.
احتمال زیاد دلیلش این هستش که انتخابگرتون رو به طور صحیح در نظر نگرفتید.
کدهای مرتبط html, css, js تون رو قرار بدین تا بشه راهنمایی کرد.
این html، که چند تا دکمه دقیقا با همین ساختاره:
<button class="like-btn btn btn-sm btn-pink text-white">
Like</button>این css که میخوام بعد کلیک رو هر دکمه اعمال بشه:
.liked{
background-color: #fa2276;
color: white;
}js:
let likeBtn = document.querySelector('.like-btn');
likeBtn.addEventListener('click', function (e) {
toggleLike();
if (likeBtn.classList.contains('liked')){
likeBtn.textContent = 'Unlike'
}else {
likeBtn.textContent = 'Like'
}
});
function toggleLike() {
likeBtn.classList.toggle('liked')
}ممنون
این کد رو براساس کد شما آماده کردم، به بخش انتخاب عناصر و پیمایش عناصر انتخاب شده دقت کنید، متوجه تفاوت ها میشید.
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>all btn click</title>
<style>
.liked{
background-color: #fa2276;
color: white;
}
</style>
</head>
<body>
<button class="like-btn btn btn-sm btn-pink text-white">Like</button>
<button class="like-btn btn btn-sm btn-pink text-white">Like</button>
<button class="like-btn btn btn-sm btn-pink text-white">Like</button>
<script>
document.querySelectorAll('.like-btn').forEach(item => {
item.addEventListener('click', event => {
//handle click
toggleLike(item);
if (item.classList.contains('liked')){
item.textContent = 'Unlike'
}else {
item.textContent = 'Like'
}
})
})
function toggleLike(item) {
item.classList.toggle('liked')
}
</script>
</body>
</html>توضیحات بیشتر در این باره:
https://flaviocopes.com/how-to-add-event-listener-multiple-elements-javascript/
@milad خیلی خیلی ممنون از راهنماییتون بله درست شد
مشکل اصلی کد من،نبود foreach برای پیمایش تک تک المنت ها بودش درسته؟
برای همین فقط روی المنت اول اعمال میشد🤔
خواهش می کنم.
در این بخش:
t likeBtn = document.querySelector('.like-btn');
likeBtn.addEventListener('click', function (e) {
// codes ...
});شما تنها اولین عنصری که کلاس like-btn رو داره انتخاب می کنید و سپس رویداد کلیک رو براش تعریف می کنید.
اما ما نیاز داریم که تمام عناصر با کلاس like-btn انتخاب بشن، و رویداد کلیک هم برای تمام این عناصر آماده باشه. بنابراین از طریق querySelectorAll همه ی موارد رو ابتدا انتخاب می کنیم، سپس رویداد کلیک رو هم به کمک پیمایشگر به تک تک موارد وصل می کنیم.