نمایش نتایج 1 تا 4 از 4

نام تاپیک: تغییر کلاس یک DIV

  1. #1

    تغییر کلاس یک DIV

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






    class="123_test"


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


    class="124_test"



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




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

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

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


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

  2. #2

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

  3. #3

    نقل قول: تغییر کلاس یک 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>


  4. #4

    نقل قول: تغییر کلاس یک DIV

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



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



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

تاپیک های مشابه

  1. سوال: چگونگی تغییر کلاس یک Div با Jquery
    نوشته شده توسط farnaz.saeedi در بخش jQuery
    پاسخ: 6
    آخرین پست: شنبه 04 آذر 1391, 15:39 عصر
  2. حرفه ای: تغيير كلاس يك كنترل در هنگام طراحي
    نوشته شده توسط just4froum در بخش برنامه نویسی در 6 VB
    پاسخ: 3
    آخرین پست: یک شنبه 15 آبان 1390, 22:47 عصر
  3. سوال: تغییر عکس یک div با کلیک
    نوشته شده توسط یاسر مددیان در بخش JavaScript و Framework های مبتنی بر آن
    پاسخ: 1
    آخرین پست: سه شنبه 25 آبان 1389, 12:22 عصر
  4. تغییر رنگ یک div هنگام ورود موس
    نوشته شده توسط ehsan640 در بخش طراحی وب (Web Design)
    پاسخ: 5
    آخرین پست: دوشنبه 14 مرداد 1387, 20:20 عصر
  5. تغییر مکان یک div بعد از render
    نوشته شده توسط rezaei manesh در بخش ASP.NET Web Forms
    پاسخ: 8
    آخرین پست: سه شنبه 18 اردیبهشت 1386, 10:48 صبح

قوانین ایجاد تاپیک در تالار

  • شما نمی توانید تاپیک جدید ایجاد کنید
  • شما نمی توانید به تاپیک ها پاسخ دهید
  • شما نمی توانید ضمیمه ارسال کنید
  • شما نمی توانید پاسخ هایتان را ویرایش کنید
  •