یه نویسنده

مقاله، کتاب، برنامه و ...

مقاله، کتاب، برنامه و ...

یه نویسنده

وبلاگی برای فعالیتهای پژوهشی و برنامه نویسی کامپیوتر، که شاید دفتر یادداشتی از دانسته‌های روزانه‌ی من باشد(شاید به‌کار شما هم بیاید). مطالبی که از دنیای کدباز جمع‌آوری میکنم و برای علاقه‌مندان این شاخه از فناوری انتشار میدهم. بیشتر نوشته‌های وبلاگ را برنامه‌نویسی‌php و سیستم‌عامل لینوکس تشکیل می‌دهند.

طبقه بندی موضوعی

۱ مطلب در مرداد ۱۳۹۲ ثبت شده است

اضافه و کم کردن عناصر صفحه به کمک jquery

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

راهکارهای زیادی برای این کار وجود داره که من اضافه کردن عناصر به کمک id و حذف همون عنصر با id از قبل داده شده.

در ابتدا فرم آپلود رو بصورت آپبود چند تایی بصورت زیر آماده میکنیم.

اضافه و حذف کردن عناصر قراره در داخل تگ‌ div که با add_element مشخص شده صورت بگیره.

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

حالا میرسیم به کد نویسی jquery:

در ابتدا دو تا متغییر برای نگهداری و کم و زیاد کردن شماره به المنت تعریف مکنیم.

var current=1;
var prev;

با کلیک بر روی دکمه add باید عنصر جدید به فرم ما اضافه بشه. برای این که فرم بهم نریزه من اون رو در داخل یک div قرار دادم تا با هر با اضافه کردن یک div که همراه با یک جعبه فایل هست بر روی صفحه اضافه بشه

 

$(document).ready(function(){
$('#add').click(function(){
   $('#add_element').append('<div id="adu'+current+'"><input type="file"  name="files[]"/></div>');
   prev = current;
   current += 1;
   console.log(prev+'--'+current);
});

اگر firebox رو روشن کنید با هر با اضافه شدن عنصر در زیر صفحه مقدار current جدید رو نشون میده. در ابتدا مقدار current رو در prev ذخیره میکنه تا برای حذف عنصر آخرین عنصر اضافه شده رو داشته باشیم. برای اضافه کردن عنصرهای جدید با مقدار id جدید هم یکی به تعداد current اضافه میشه.

و برای حذف عناصر اضافه شده:

 

$('#del').click(function(){
	$('#adu'+prev).remove();
	prev -= 1;
});

مقدار prev که آخرین شمارنده اضافه کردن عنصر جدید رو داشت با همون شمارنده آخرین عنصر رو حذف میکنه و برای حذف عناصر بعدی یکی از مقدار prev کم میکنه. البته میشه شرطی هم گذاشت در صورت بودن عنصر اون رو حذف کنه و در غیر اون صورت برنامه ادامه پیدا نکنه. البته به همین شکل هم مشکلی پیش نمیاد.

 


کد کامل این برنامه رو میتونید دانلود کنید.

دریافت
حجم: 73.3 کیلوبایت