کمک در کامل کردن یک قطعه کد jquery

[reza_yki 103]

سلام
من یک مشکل داشتم اگه میشه راهنمایی کنید

بنده در جی کوئری مبتدی هستم پس لطفا راهنمایی کاملی کنید
مشکلم اینه که من یه ابزارک نوشتم که مطالب چند دسته رو به صورت تب بندی شده نشون میده تا این جا درست نشون میده ولی مشکل از جایی شروع میشه که اگه از این ابزارک تو یک صفحه دوبار استفاده بشه با کلیک رو هر تب ابزارک دوم هم تغییر میکنه    

jQuery(document).ready(function ($) {
    $('.box-select a').on('click',function(e){
        e.preventDefault();
        var $this= $(this);
        $('.box-select a').removeClass('active-tab-sidebar');
        $this.addClass('active-tab-sidebar');
        var $container = $this.attr('href');
        $('.tab-sidebar-content').css('display','none');
        $($container).fadeIn(600)
    });
});

 
مشکل رو میدونم چی هست یعنی من به صورت استاتیک گفتم تو این صفحه رو هر لینکی که داخل box-select بود کلیک شد محتوا رو نشون بده ولی نمی تونم این رو درست کنم و داینامیک کنم لطفا راهنمایی کنید
 ممنون

[فرحان 997]

سلام. شاید مرتبط با مشکلتون نباشه اما توی خط 7 اومدی آدرس موجود توی تگ لینک رو گذاشتی توی متغییر $container بعد دو خط بعد گفتی fadeIn !

جی کوئری روی سلکتورها کار میکنه من نمیدونم کدتون الان چطوری کار داده.

و مشکل دوم هم اینه که توی خط آخر گفتی :

در 57 دقیقه قبل، reza_yki گفته است :

$($container).fadeIn(600)

در حالی که کافیه بگی :

$container.fadeIn(600);

 

مشکل سوم هم اینه که زمانی که از توابع fade و slide جی کوئری استفاده می کنی، دیگه نباید مستقیم با تابع css المنت ها رو مخفی کنی.

یعنی به جای

در 57 دقیقه قبل، reza_yki گفته است :

$('.tab-sidebar-content').css('display','none');

بنویس:

$('.tab-sidebar-content').hide();

 

اینها رو انجام بده و کنسول مرورگر رو هم بررسی کن ببین خطایی نداری.

[reza_yki 103]

در 16 دقیقه قبل، فرحان گفته است :

سلام. شاید مرتبط با مشکلتون نباشه اما توی خط 7 اومدی آدرس موجود توی تگ لینک رو گذاشتی توی متغییر $container بعد دو خط بعد گفتی fadeIn !

جی کوئری روی سلکتورها کار میکنه من نمیدونم کدتون الان چطوری کار داده.

و مشکل دوم هم اینه که توی خط آخر گفتی :

در حالی که کافیه بگی :

$container.fadeIn(600);

 

مشکل سوم هم اینه که زمانی که از توابع fade و slide جی کوئری استفاده می کنی، دیگه نباید مستقیم با تابع css المنت ها رو مخفی کنی.

یعنی به جای

بنویس:

$('.tab-sidebar-content').hide();

 

اینها رو انجام بده و کنسول مرورگر رو هم بررسی کن ببین خطایی نداری.

سلام این خطا رو میده تو کنسول:

TypeError: $container.fadeIn is not a function

ببینید این کد html هست:

<div class="box-select">
                <a class="active-tab-sidebar" href="#sidebar-tab-1"><i class="fa fa-star"><span>7 day</span></i></a>
                <a href="#sidebar-tab-2"><i class="fa fa-star"><span>30 day</span></i></a>
                <a href="#sidebar-tab-3"><i class="fa fa-star"><span>365 day</span></i></a>
            </div>
<ul id="sidebar-tab-1" class="tab-sidebar-content clearfix">
  محتوای حلقه
  </ul>
<ul id="sidebar-tab-2" class="tab-sidebar-content clearfix">
    محتوای حلقه
  </ul>
<ul id="sidebar-tab-3" class="tab-sidebar-content clearfix">
    محتوای حلقه
  </ul>

نمی دونم ولی کد خودم کامل و بدون ایراد کار می کنه فقط مشکل اینه که اگه از این ابزارک دوبار استفاده بشه وقتی رو یک تب کلیک شد ابزارک اول و همین طور ابزارک دوم محتواش تغییر میکنه

لطفا راهنمایی کنید

ویرایش شده اسفند 94 توسط reza_yki

[فرحان 997]

اگر به این صورت هست html تون که دیگه کدهاتون درسته.

مشکل اصلیتون هم اینه که توی خط 5 گفتید :

$('.box-select a').removeClass('active-tab-sidebar');

این کد میگرده توی کل صفحه فعلی، ولی شما باید بیای پرنت این المنت که کلاس box-select داره رو پیدا کنی و بعد کلاس مورد نظر رو از تگ های a اون حذف کنی.

برای این کار کل مجموعه ی تب ها ul ها رو بگذارید توی یک المنت دیگه و بهش یک کلاس مثلا boxes-wrapper بدید. و بعد با کد زیر اونو پیدا کنید و به باکس سلکت توی اون برید، به این صورت :

$this.closest('.boxes-wrapper').children('.box-select').find(a).removeClass('active-tab-sidebar');

تابع closest میاد اولین پرنتی که اون کلاس رو داره رو پیدا میکنه و تابع children میاد اولین فرزندی که کلاس مورد نظر رو داره رو پیدا میکنه و بعد تابع find میاد همه ی تگ های a رو سلکت میکنه.

کدم رو تست نکردم ممکنه خطا بده اما برای کد من که کار بده باید کد html ت الان به این صورت بشه :

<div class='boxes-wrapper'>
  <div class="box-select">
    <a class="active-tab-sidebar" href="#sidebar-tab-1"><i class="fa fa-star"><span>7 day</span></i></a>
    <a href="#sidebar-tab-2"><i class="fa fa-star"><span>30 day</span></i></a>
    <a href="#sidebar-tab-3"><i class="fa fa-star"><span>365 day</span></i></a>
  </div>
  <ul id="sidebar-tab-1" class="tab-sidebar-content clearfix">
    محتوای حلقه
    </ul>
  <ul id="sidebar-tab-2" class="tab-sidebar-content clearfix">
      محتوای حلقه
    </ul>
  <ul id="sidebar-tab-3" class="tab-sidebar-content clearfix">
      محتوای حلقه
  </ul>
</div>

 

[فرحان 997]

این کدم

$this.closest('.boxes-wrapper').children('.box-select').find(a).removeClass('active-tab-sidebar');

رو میشه به این صورت بهینه کرد :

$this.closest('.boxes-wrapper').find(.box-select a).removeClass('active-tab-sidebar');

 

[reza_yki 103]

در 9 دقیقه قبل، فرحان گفته است :

اگر به این صورت هست html تون که دیگه کدهاتون درسته.

مشکل اصلیتون هم اینه که توی خط 5 گفتید :

$('.box-select a').removeClass('active-tab-sidebar');

این کد میگرده توی کل صفحه فعلی، ولی شما باید بیای پرنت این المنت که کلاس box-select داره رو پیدا کنی و بعد کلاس مورد نظر رو از تگ های a اون حذف کنی.

برای این کار کل مجموعه ی تب ها ul ها رو بگذارید توی یک المنت دیگه و بهش یک کلاس مثلا boxes-wrapper بدید. و بعد با کد زیر اونو پیدا کنید و به باکس سلکت توی اون برید، به این صورت :

$this.closest('.boxes-wrapper').children('.box-select').find(a).removeClass('active-tab-sidebar');

تابع closest میاد اولین پرنتی که اون کلاس رو داره رو پیدا میکنه و تابع children میاد اولین فرزندی که کلاس مورد نظر رو داره رو پیدا میکنه و بعد تابع find میاد همه ی تگ های a رو سلکت میکنه.

کدم رو تست نکردم ممکنه خطا بده اما برای کد من که کار بده باید کد html ت الان به این صورت بشه :

<div class='boxes-wrapper'>
  <div class="box-select">
    <a class="active-tab-sidebar" href="#sidebar-tab-1"><i class="fa fa-star"><span>7 day</span></i></a>
    <a href="#sidebar-tab-2"><i class="fa fa-star"><span>30 day</span></i></a>
    <a href="#sidebar-tab-3"><i class="fa fa-star"><span>365 day</span></i></a>
  </div>
  <ul id="sidebar-tab-1" class="tab-sidebar-content clearfix">
    محتوای حلقه
    </ul>
  <ul id="sidebar-tab-2" class="tab-sidebar-content clearfix">
      محتوای حلقه
    </ul>
  <ul id="sidebar-tab-3" class="tab-sidebar-content clearfix">
      محتوای حلقه
  </ul>
</div>

 

 اسم کلاس باکس من box-content-big هست:

 

<div class='box-content-big'>
  <div class="box-select">
    <a class="active-tab-sidebar" href="#sidebar-tab-1"><i class="fa fa-star"><span>7 day</span></i></a>
    <a href="#sidebar-tab-2"><i class="fa fa-star"><span>30 day</span></i></a>
    <a href="#sidebar-tab-3"><i class="fa fa-star"><span>365 day</span></i></a>
  </div>
  <ul id="sidebar-tab-1" class="tab-sidebar-content clearfix">
    محتوای حلقه
    </ul>
  <ul id="sidebar-tab-2" class="tab-sidebar-content clearfix">
      محتوای حلقه
    </ul>
  <ul id="sidebar-tab-3" class="tab-sidebar-content clearfix">
      محتوای حلقه
  </ul>
</div>

و کد رو به این شکل زدم :

$this.closest('.box-content-big').children('.box-select').find(a).removeClass('active-tab-sidebar');

ولی کار نکرد متاسفانه

 

 

 

 

[فرحان 997]

در 6 ساعت قبل، reza_yki گفته است :

 اسم کلاس باکس من box-content-big هست:

 

<div class='box-content-big'>
  <div class="box-select">
    <a class="active-tab-sidebar" href="#sidebar-tab-1"><i class="fa fa-star"><span>7 day</span></i></a>
    <a href="#sidebar-tab-2"><i class="fa fa-star"><span>30 day</span></i></a>
    <a href="#sidebar-tab-3"><i class="fa fa-star"><span>365 day</span></i></a>
  </div>
  <ul id="sidebar-tab-1" class="tab-sidebar-content clearfix">
    محتوای حلقه
    </ul>
  <ul id="sidebar-tab-2" class="tab-sidebar-content clearfix">
      محتوای حلقه
    </ul>
  <ul id="sidebar-tab-3" class="tab-sidebar-content clearfix">
      محتوای حلقه
  </ul>
</div>

و کد رو به این شکل زدم :

$this.closest('.box-content-big').children('.box-select').find(a).removeClass('active-tab-sidebar');

ولی کار نکرد متاسفانه

 

 

 

 

به این صورت هم تست کردید :

$this.closest('.box-content-big').find('.box-select a').removeClass('active-tab-sidebar');

 

از سایت انگلیسی جی کوئری می تونید توضیحات توابع موجود رو پیدا و تست کنید. مثلا به غیر از closest  میشه از تابع parents هم استفاده کرد. اونو بگذارید و تست کنید. به این صورت :

$this.parents('.box-content-big').first().find('.box-select a').removeClass('active-tab-sidebar');

 

[reza_yki 103]

در 11 ساعت قبل، فرحان گفته است :

به این صورت هم تست کردید :

$this.closest('.box-content-big').find('.box-select a').removeClass('active-tab-sidebar');

 

از سایت انگلیسی جی کوئری می تونید توضیحات توابع موجود رو پیدا و تست کنید. مثلا به غیر از closest  میشه از تابع parents هم استفاده کرد. اونو بگذارید و تست کنید. به این صورت :

$this.parents('.box-content-big').first().find('.box-select a').removeClass('active-tab-sidebar');

 

بسیار ممنون بله به همون صورت نوشتم اون مشکل رو به کمک شما حل کردم

و یک مشکلی که این ابزارک من داشت این بود که وقتی روی یک تب  کلیک میکردی محتوای هر دو عوض میشود که به قرار دادن id یکتا، اون هم حل شد بسیار ممنون

میشه راهنمایی کنید که چه طور می تونم این رو ای جکسی هم بکنم؟

یعنی وقتی رو هر تب کلیک شد محتواش رو از دیتابیس لود کنه نه هنگام لود قالب

سواد من تا این جا قد داد که وقتی رو تب ها کلیک شد یه درخواست  ajax ارسال بشه:

        $.ajax({
            url : data.ajax_url,
            type:'post',
            dataType:'json',
            data:{
                action:'load_most_tab',
                post_id : $container,
            },
            success:function(response){},
            error:function(){}
            });
        });

 

[فرحان 997]

سلام. باید یک فایل جدید توی پوسته یا پلاگینتون درست کنید که توی اون دستور واکشی مطالب و پرینتشون باشه و توی فایل اصلی افزونتون یک هوک به template_redirect بزنید و توی فانکش اون چک کنید ، اگر درخواست درست بود با تابع die ادامه عملیات لود وردپرس قطع بشه و در قبل از اون تابع die بگید برو به اون فایل من یعنی اونو اینکلود کن. در این صورت هم تا اینجای کار وردپرس رو لود کردین و به توابعش دسترسی دارین و هم جلوی پرینت شدن استایل ها ی قالب رو گرفتین در نتیجه هرچی از دیتابیس دریافت کردین رو می تونید به صورت جیسون راحت توی خروجی پرینت کنید.

 

فقط باید حواستون باشه که قبل از ریدایرکت کردن به فایلتون باید یک چک بزارید که بررسی کنه درخواست درست اومده و معتبره. یعنی باید قبل از این کار ها توی فایل اصلی افزونه چک کنید که متغییر (مثلا) is_tab_ajax و همچنین متغییر tab_id ست شده باشه. در غیر این صورت موقع درخواست های عادی هم لود وردپرس قطع میشه و همیشه فکر میکنه درخواست آجاکسی اومده.

 

البته راه دیگه ای هم داره این کار که وردپرس در حالت پیشفرض اونو توصیه کرده و اونم ایجاد یک هوک از نوع آجاکس هست. راهنمای کامل استفاده از این روش توی سایت وردپرس موجوده.

 

اینها برای سمت سرور هست و مدیریت دریافت و ریپلیس کردن داده سمت کاربر و غیره دیگه با خودتونه. میتونید از سورس افزونه هایی که سیستم آجاکس پیاده کردن هم کمک بگیرید.

 

موفق باشید.

[reza_yki 103]

در 3 ساعت قبل، فرحان گفته است :

سلام. باید یک فایل جدید توی پوسته یا پلاگینتون درست کنید که توی اون دستور واکشی مطالب و پرینتشون باشه و توی فایل اصلی افزونتون یک هوک به template_redirect بزنید و توی فانکش اون چک کنید ، اگر درخواست درست بود با تابع die ادامه عملیات لود وردپرس قطع بشه و در قبل از اون تابع die بگید برو به اون فایل من یعنی اونو اینکلود کن. در این صورت هم تا اینجای کار وردپرس رو لود کردین و به توابعش دسترسی دارین و هم جلوی پرینت شدن استایل ها ی قالب رو گرفتین در نتیجه هرچی از دیتابیس دریافت کردین رو می تونید به صورت جیسون راحت توی خروجی پرینت کنید.

 

فقط باید حواستون باشه که قبل از ریدایرکت کردن به فایلتون باید یک چک بزارید که بررسی کنه درخواست درست اومده و معتبره. یعنی باید قبل از این کار ها توی فایل اصلی افزونه چک کنید که متغییر (مثلا) is_tab_ajax و همچنین متغییر tab_id ست شده باشه. در غیر این صورت موقع درخواست های عادی هم لود وردپرس قطع میشه و همیشه فکر میکنه درخواست آجاکسی اومده.

 

البته راه دیگه ای هم داره این کار که وردپرس در حالت پیشفرض اونو توصیه کرده و اونم ایجاد یک هوک از نوع آجاکس هست. راهنمای کامل استفاده از این روش توی سایت وردپرس موجوده.

 

اینها برای سمت سرور هست و مدیریت دریافت و ریپلیس کردن داده سمت کاربر و غیره دیگه با خودتونه. میتونید از سورس افزونه هایی که سیستم آجاکس پیاده کردن هم کمک بگیرید.

 

موفق باشید.

 

باگفته شما من ایجور برداشت می کنم که یعنی اگه من 10 تا تب داشته باشم باید برای هر تب یه فایل درست کنم؟

من کل پروژه رو که مربوط به این ابزارک میشه رو براتون ارسال کردم لطفا اگه میشه ست کنید من هر کاری کردم نتوستم

تب

چیزی که من می خوام درست کنم شبیه به این هست:

http://demo.tagdiv.com/newspaper

منظورم قسمت تب DON'T MISS هست

یه سوالم دارم آیا راهی هست که تب رو داینامیک کرد که کاربر به دلخواه خود هر چقدر خواست  تب درست کنه الان من به صورت دستی 4 تا تب زدم ایا میشه مثلا کاربر بخواد 8 تا بشه

 

ممنون از راهنمایی هاتون

 

ویرایش شده اسفند 94 توسط reza_yki

[فرحان 997]

سلا. نه نیازی نیست برای هر تب یک فایل درست کنید! بسته به این که چه محتوایی قرار توی تب هاتون لود بشه می تونید توی یک فایل همه کارها رو پیاده سازی کنید.

مثلا اگر قرار هست هر تبی نمایش دهنده محتوای یک دسته باشه، در این صورت اگر توی مقادیر پست شده مقدار load_cat=2 با آجاکس پست کنید به سرور در این صورت می تونید توی اون فایل بگید هر دسته ای که ای دی 2 داشت لود بشه.

در مورد این که کاربر بتونه داینامیک تب ایجاد کنه ، شما باید توی ابزارکتون این قابلیت رو بگنجونید یا براش صفحه تنظیمات در نظر بگیرید.

مثلا توی فورم ابزارک یه فیلد متنی و یه دکمه اضافه کنید که ادمین بتونه توی فیلد متنی ای دی دسته ای که می خواد نمایش داده بشه رو وارد کنه و با زدن دکمه با جاوااسکریپت مرتب یک فیلد جدید زیر فیلد قبلی اضافه بشه. و کد جاوا اسکریپتتون باید به صورت داینامیک به فیلد های متنی ای دی بده و خاصیت نیم اونها رو طوری تنظیم کنه که همه به صورت ارایه به سرور ارسال بشن بعد سمت سرور کل این ارایه توی یک اپشن ذخیره بشه و موقع لود هم لوپ بزارید روی این ارایه. و برای هر خونه ی اون فرض کنید که شناسه یک دسته هست.

این نمونه سادش هست و کارای بیشتری میشه کرد. میشه مثلا دو تا فیلد متنی گذاشت که اولی نمایش دهنده ی ای دی دسته و دومی تعداد مطلب باشه و غیره... .

 

متاسفانه وقت بررسی فایل هاتون رو ندارم ولی اگر وقت کردم براتون کاملش می کنم.

[reza_yki 103]

در در ۱۳۹۴/۱۲/۸ ه‍.ش. at 12:31، فرحان گفته است :

در ۱ ساعت قبل، فرحان گفته است :

سلا. نه نیازی نیست برای هر تب یک فایل درست کنید! بسته به این که چه محتوایی قرار توی تب هاتون لود بشه می تونید توی یک فایل همه کارها رو پیاده سازی کنید.

مثلا اگر قرار هست هر تبی نمایش دهنده محتوای یک دسته باشه، در این صورت اگر توی مقادیر پست شده مقدار load_cat=2 با آجاکس پست کنید به سرور در این صورت می تونید توی اون فایل بگید هر دسته ای که ای دی 2 داشت لود بشه.

در مورد این که کاربر بتونه داینامیک تب ایجاد کنه ، شما باید توی ابزارکتون این قابلیت رو بگنجونید یا براش صفحه تنظیمات در نظر بگیرید.

مثلا توی فورم ابزارک یه فیلد متنی و یه دکمه اضافه کنید که ادمین بتونه توی فیلد متنی ای دی دسته ای که می خواد نمایش داده بشه رو وارد کنه و با زدن دکمه با جاوااسکریپت مرتب یک فیلد جدید زیر فیلد قبلی اضافه بشه. و کد جاوا اسکریپتتون باید به صورت داینامیک به فیلد های متنی ای دی بده و خاصیت نیم اونها رو طوری تنظیم کنه که همه به صورت ارایه به سرور ارسال بشن بعد سمت سرور کل این ارایه توی یک اپشن ذخیره بشه و موقع لود هم لوپ بزارید روی این ارایه. و برای هر خونه ی اون فرض کنید که شناسه یک دسته هست.

این نمونه سادش هست و کارای بیشتری میشه کرد. میشه مثلا دو تا فیلد متنی گذاشت که اولی نمایش دهنده ی ای دی دسته و دومی تعداد مطلب باشه و غیره... .

 

متاسفانه وقت بررسی فایل هاتون رو ندارم ولی اگر وقت کردم براتون کاملش می کنم.

 

من با سیلکت دسته ها رو وارد کردم و با یه اینپوت تعداد رو به حلقه گفتم که چی باشه اونا رو قبلا درست کرده بودم فقط یه ای جکس مونده اگه وقت کردین لطفا کامل کنید، شما اگه فایل بنده رو ببینید همه چی کامل هست فقط ای جکسی مونده حتی یه فایل با نام ajax.php درست کردم وخروجی رو هم تقریبا ست کردم مشکل من قسمت js هست اونم نصفه کاره درست کردم فک نمی کنم برای شما بیشتر از 5 دقیقه طول بکشه

این فایل رو اگه میشه شما به صورت یه قالب نصب کنید همه چی مثل یه قالب ست هست

باز ممنون