jistili1

مشکل با رویداد change در جی کوئری

3 پست در این موضوع قرار دارد

سلام دوستان.من یک select box دارم و قرار بر اینه که به ازای هر مقدار select box یک div خاص نمایش داده بشه و بقیه div های مربوط به مقادیر دیگر select box مخفی بشن.

این کد جی کوئری من هست:


	$("#select").change(function(){
		if($(this).val()=="empty"){
			$("#date").css("display","hidden");
			$("#localref").css("display","hidden");
			$("#refid").css("display","hidden");
			$("#number").css("display","hidden");
			$("#product").css("display","hidden");
			$("#price").css("display","hidden");
		}
		if($(this).val()=="localref"){
			$("#date").css("display","hidden");
			$("#localref").css("display","block");
			$("#refid").css("display","hidden");
			$("#number").css("display","hidden");
			$("#product").css("display","hidden");
			$("#price").css("display","hidden");
		}
		if($(this).val()=="date"){
			$("#date").css("display","block");
			$("#localref").css("display","hidden");
			$("#refid").css("display","hidden");
			$("#number").css("display","hidden");
			$("#product").css("display","hidden");
			$("#price").css("display","hidden");
		}
		if($(this).val()=="price"){
			$("#date").css("display","hidden");
			$("#localref").css("display","hidden");
			$("#refid").css("display","hidden");
			$("#number").css("display","hidden");
			$("#product").css("display","hidden");
			$("#price").css("display","block");
		}
		if($(this).val()=="number"){
			$("#date").css("display","hidden");
			$("#localref").css("display","hidden");
			$("#refid").css("display","hidden");
			$("#number").css("display","block");
			$("#product").css("display","hidden");
			$("#price").css("display","hidden");
		}
		if($(this).val()=="product"){
			$("#date").css("display","hidden");
			$("#localref").css("display","hidden");
			$("#refid").css("display","hidden");
			$("#number").css("display","hidden");
			$("#product").css("display","block");
			$("#price").css("display","hidden");
		}
		if($(this).val()=="refid"){
			$("#date").css("display","hidden");
			$("#localref").css("display","hidden");
			$("#refid").css("display","block");
			$("#number").css("display","hidden");
			$("#product").css("display","hidden");
			$("#price").css("display","hidden");
		}
		
	});
	

حالا مشکل من اینجاست که فرض کنید من از توی select box ، مقدار date رو انتخاب کردم.خب تا اینجا درست کار میکنه و div مربوط به date برای من نمایش داده میشه.حالا اگه روی مقدار empty کلیک کنم ، طبق کد باید تمامی div ها مخفی بشن ولی این اتفاق نمیفته.حالا من از select box مقدار date رو انتخاب کردم و div مربوط به date برام نمایش داده میشه اگه بعدش روی گزینه localref کلیک کنم ، div مربوط به localref نمایش داده میشه ولی div مربوط به date مخفی نمیشه.ممنون میشم کمکم کنید که بفهمم مشکل از کجاست.

0

به اشتراک گذاری این پست


لینک به پست

توی css چیزی به اسم display=hidden نداریم.

مقدار display رو باید روی none تنظیم کنید.

کدهاتون رو هم  اصلاح کنید که کد جی کوئری شما اینقدر طولانی نشه. مثلا :

$("#date, #refid,#number, #product, #price").css("display","none");
$("#refid").css("display","block");

حلاصه کد شما هم به صورت زیر میشه:

$("#date, #refid,#number, #product, #price").css("display","none");
switch($(this).val()){
case "localref":
$("#localref").css("display","block");
break;
case "price":
$("#price").css("display","block");
break;
//baghiye ro ham ezafe konid ...

}

 

اگر مقادیر توی سلکتت با مقدار ای دی المان هات برابر باشن به جای سلکت بالا میتونی کار رو بایه دستور تمام کنی به صورت زیر:

$("#date, #refid,#number, #product, #price").css("display","none");
$("#" + $(this).val()).css("display","block");

 

دقت کن توی جاوااسکریپت قراره هربار کاربر این فایل ها رو دانلود بکنه. پس باید تاجای ممکن کدتو خلاصه بکنی، حتی اگه شده توی کدهای سمت سلکتت تغییر ایجاد کنی که بشه به صورت اخرین روشی که گفتم کار رو انجام بدی، باید این کار رو بکنی.

 

0

به اشتراک گذاری این پست


لینک به پست
در 6 ساعت قبل، فرحان گفته است :

توی css چیزی به اسم display=hidden نداریم.

مقدار display رو باید روی none تنظیم کنید.

کدهاتون رو هم  اصلاح کنید که کد جی کوئری شما اینقدر طولانی نشه. مثلا :


$("#date, #refid,#number, #product, #price").css("display","none");
$("#refid").css("display","block");

حلاصه کد شما هم به صورت زیر میشه:


$("#date, #refid,#number, #product, #price").css("display","none");
switch($(this).val()){
case "localref":
$("#localref").css("display","block");
break;
case "price":
$("#price").css("display","block");
break;
//baghiye ro ham ezafe konid ...

}

 

اگر مقادیر توی سلکتت با مقدار ای دی المان هات برابر باشن به جای سلکت بالا میتونی کار رو بایه دستور تمام کنی به صورت زیر:


$("#date, #refid,#number, #product, #price").css("display","none");
$("#" + $(this).val()).css("display","block");

 

دقت کن توی جاوااسکریپت قراره هربار کاربر این فایل ها رو دانلود بکنه. پس باید تاجای ممکن کدتو خلاصه بکنی، حتی اگه شده توی کدهای سمت سلکتت تغییر ایجاد کنی که بشه به صورت اخرین روشی که گفتم کار رو انجام بدی، باید این کار رو بکنی.

 

وااااای خاک بر سرم نمیدونم display:hidden رو از کجام آوردم اصلا حواسم نبود.ممنون دستتون درد نکنه خیلی راهنمائیتون کامل بود.

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط ramy1908
      درود، وقت دوستان بخیر
      یه سوال خیلی خیلی تخصصی داشتم، من برای سایتم اسلایدر jQuery استفاده می کنم.
      چطور میتونم بخشی ایجاد کنم ادمین فقط بعضی از مطالب رو وارد اسلایدر کنه، نمیخوام که یه دسته جداگانه واسه اسلایدر ایجاد کنم.
      راهی وجود داره برای این کار؟
    • توسط Neon_63
      سلام همگی. من در سایتم وقتی محصولی رو وارد سبد خرید میکنم و میرم به صفحه پرداخت، بهم ارور زیر رو میده:
      کتابخانه جی کوئری قبل از شهر های ایران لود نشده است!
      و بعد هم که یه استان رو انتخاب میکنم، در قسمت شهر ها میزنه "یافت نشد!"
      قالبش رو هم خودم نوشتم، اسم سایت هم رصد بوک هست. از آخرین نسخه وردپرس و ووکامرس هم استفاده میکنم
    • توسط nokte
      با سلام
      من قالب Sigma Plus را نصب کردم  فقط یک مشکل. در حال تغییرنام ابزارک ها از نام سیگما به نام سایت خودم بودم که متوجه شدم در پنل تنظیمات قالب دیگه تنظیمات لود نمی شوند یعنی مثلا روی تنظیمات هدر کلیک میکنم تنظیمات را نمیاره و انگار جاوا از کار افتاده و لینکی نداره که باز کنه. من تغییر خاصی در جایی ندادم. درنت سرچ کردم گفته بودند برای مشکل از کار افتادن لینک های جاوا باید کدی را در فایل فانکشن قراد بدهم ولی وقتی این کارو کردم چون فایل فانکشن رمز گذاری شده قالب کلا لود نشد. آیا میدانید مشکل از کجاست؟
      برای مثال در لینک wp-admin/admin.php?page=SigmaPlus&tab=9 که مربوط به تنظیمات قالبه، منوهای تنظیمات را میاره ولی محتوای تنظیمات قالب را نمیاره.

    • توسط SadraHkm
      سلام دوستان
      امیدوارم حالتون خوب باشه
      لطفا یه نگاهی به کد زیر بندازید
      <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <p>Paragraph 4</p> <button id="calcBtn">Calculate</button> <div id="result"></div> <script> $(window).ready(function () { $('#calcBtn').click(function (e) { $('p').each(function () { $(this).css('color','rgb('+ rand(0,255) +','+ rand(0,255) +','+ rand(0,255) +')'); $('#result').append($(this).html()); // ----------------- This Code : //$('#result').append($(this)); }) }); }) </script> در اون قسمتی از کد که دارم محتوی کدهای پاراگراف رو به تگ div اضافه میکنم یه سوالی ذهن منو مشغول کرده.
      اگر همین کدی که الان هست رو اجرا کنیم، جی کوئری هربار توی حلقه رنگ تگ اصلی رو تغییر میده و یه کپی از اون پاراگراف میگیره و اضافه میکنه به div.
      ولی اگه اون تکه کدی که کامنت هست رو با اون خط جایگزین کنیم، میاد و هر بار کلا تگ پاراگراف رو برمیداره و اضافش میکنه به div. یعنی دیگه کپی ازش نمیگیره و دیگه تگ های p اون بالا باقی نمیموند.
      میخواستم ببینم آیا من درست فهمیدم ؟ یا مشکلی توی کد هست که اینجوری اجرا میشه ؟!
      باتشکر فراوان
       
    • توسط SadraHkm
      سلام دوستان امیدوارم حالتون خوب باشه
      میخواستم بدونم در تکه کد زیر :
      <body onload="startGame();" onkeydown="return handleKeys(event);"> <script> ... if (youWin()) { alert("You Win !"); location.reload(); } } </script> چرا در رویداد onkeydown از return استفاده شده؟ توی اینترنت جستجو کردم ولی درست نفهمیدم میشه لطفا راهنمایی کنید
      با تشکر فراوان