نقل قول: تغییر کلاس یک DIV
$(document).ready(function(){
var change = true;
setInterval(function(){
if(change){
$('#samplediv').removeClass('123_test').addClass(' 124_test');
change = false;
}else{
$('#samplediv').removeClass('124_test').addClass(' 123_test');
change = true;
}
}, 20000);
});
(البته چون تو گوشی و بدون ادیتور مناسب نوشتم شاید کوچیک بزرگی حروف رو بعضی جا ها اشتباه نوشته باشم)
و حالا توضیح:
در جاوا اسکریپت یه تابع داریم به اسم setInterval که وظیفه اش فراخوانی یک تابع با فاصله های زمانی ثابته که پارامتر اول تابعی رو میگیره که قراره اجرا شه و پارامتر دوم زمان انتظار برای اجرای دوباره تابع برحسب میلی ثانیه است که اینجا ۲۰۰۰۰ ه یعنی ۲۰ ثانیه
تو جی کوئری هم بعد سلکت المان مدنظرمون با removeClass میشه کلاس دلخواه رو حذف کرد و با addClass کلاس دلخواه رو اضافه کرد.
اینجا هم از یه متغیر استفاده کردیم که بهمون بگه الآن کدوم کلاس رو داره و کدوم کلاس حذف و کدوم باید اضافه شه که تو حالتی که من نوشتم کلاس اولیه عنصر باید 123_test باشه.
البته یه نکته هم هست میتونستیم به جای این دو تابع از تابع toggleClass استفاده کنیم که کارش اینه که اگه اون کلاس رو داشت حذفش میکنه در غیر این صورت اضافه میکنه.
نقل قول: تغییر کلاس یک DIV
با تشکر از دوست عزیز marasiali ، کمک بزرگی بود یه نمونه ای که با راهنمایی ایشون نوشتم :
<html>
<head>
<style>
.intro {
background-color: yellow;
}
.second {
background-color: green;
}
.third {
background-color: red;
}
.four {
background-color: Blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var num='1';
$(document).ready(function(){
var change = true;
setInterval(function(){
if(num==1)
{
$('#samplediv').removeClass('intro').addClass('sec ond');
}
if(num==2)
{
$('#samplediv').removeClass('second').addClass('th ird');
}
if(num==3)
{
$('#samplediv').removeClass('third').addClass('fou r');
}
if(num==4)
{
$('#samplediv').removeClass('four').addClass('intr o');
}
num++;
if(num>4)
{
num=1;
}
// alert(num)
}, 7000);
});
</script>
</head>
<div id=samplediv class="intro">
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>
</html>
نقل قول: تغییر کلاس یک DIV
خواهش میکنم فقط یه نکته:
اگر تغییرتون خیلی جزئی و در حد یه ویژگیه میتونین کلاس نسازین و استایل رو مستقیما مقداردهی کنین.
$('#samplediv').css("background-color", "red");
راستی تو کدتون متغیر change اضافیه:چشمک: