سوال: تغییر کلاس یک DIV [بایگانی]

mehran6764

شنبه 20 مرداد 1397, 10:31 صبح

سلام ، من میخوام نام کلاسی که در یک div هس در فاصله زمانی معین تغییر کنه مثلا در 20 ثانیه اول بشه

class="123_test"

و در 40 ثانیه دوم

class="124_test"

<div id=samplediv class="123_test" tabindex="0" role="button">

به صورت شفاف بخوام بگم دو مورد رو تو جی کوئری میخوام یاد بگیرم :

اول : چطورنام class یک div رو می توان تغییر داد ؟

دوم : چطوری در جی کوئزی می تونیم یه تایمر داشته باشیم که بی نیاز به کلیک روی باتن و ... عملیاتی رو تکرار کنه ، مثل تایمر سی شارپ ..

پیشاپیش از پاسخ و توجه استادان بزرگوار ممنونم ..

marasiali

شنبه 20 مرداد 1397, 15:21 عصر

$(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 استفاده کنیم که کارش اینه که اگه اون کلاس رو داشت حذفش میکنه در غیر این صورت اضافه میکنه.

mehran6764

شنبه 20 مرداد 1397, 23:02 عصر

با تشکر از دوست عزیز 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>

marasiali

یک شنبه 21 مرداد 1397, 00:12 صبح

خواهش میکنم فقط یه نکته:
اگر تغییرتون خیلی جزئی و در حد یه ویژگیه میتونین کلاس نسازین و استایل رو مستقیما مقداردهی کنین.

$('#samplediv').css("background-color", "red");

راستی تو کدتون متغیر change اضافیه:چشمک: