unid_user

جی کوئری
مشکل با addclass() در جی کوئری

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

سلام و درود

دوستان گرامی ، من یک منو دارم که می خوام هر بار که روی یکی از li ها کلیک کردم کلاس active به اون اضافه بشه. ولی روی هرکدوم کلیک میکنم تمام li ها کلاس active رو می گیرن. لطفا راهنمایی کنید.

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

$("ul.icon-div-ul li").click(function() {
  $("ul.icon-div-ul li").addClass('active');
});

با تشکر و سپاس

0

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


لینک به پست

یافتم! کد زیر درسته.

$(document).ready(function() {
$("ul.icon-div-ul li").click(function () {
    $(this).addClass("active");
    $("ul.icon-div-ul li").not(this).removeClass("active");
});

});

 

0

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


لینک به پست

خوب یه مشکل تازه!

حالا می خوام زمانی که روی هر کدام از li ها کلیک میکنم یه تگ div هست که باید display اون block بشه. اما دوستان هیچ ارتباطی بین این li ها با اون تگ های div وجود نداره. لطفا راهنمایی کنید.

با تشکر و سپاس

0

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


لینک به پست

سلام و درود @unid_user

 

احتیاجی به ارتباط نیست.

شما بعد از کلیک روی هر المنتی میتونید هر کدوم از المنت های صفحه رو بهش CSS اضافه کنید.

0

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


لینک به پست
در هم اکنون، mehran-b گفته است :

سلام و درود @unid_user

 

احتیاجی به ارتباط نیست.

شما بعد از کلیک روی هر المنتی میتونید هر کدوم از المنت های صفحه رو بهش CSS اضافه کنید.

1 ساعته دارم روش کار میکنم. ذهنم کلا خالی شده. لطفا یه راهنمایی کنید ممنون.

0

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


لینک به پست
در 3 دقیقه قبل، unid_user گفته است :

1 ساعته دارم روش کار میکنم. ذهنم کلا خالی شده. لطفا یه راهنمایی کنید ممنون.

(function($) {
	$(function() {
		$("ul.icon-div-ul li").click(function() {
			
			$("div#div-id").css("display", "block");
			
		});
	});
})(jQuery);

 

1

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


لینک به پست

ارسال شده در (ویرایش شده)

$(document).ready(function() {
$("ul.icon-div-ul li").click(function () {
  $(".item-div").find(".item-list1").addClass('show');

});

});

این کد بالا رو خودم نوشتم دقیقا نتیجه مثل شماست. ولی هر دو کار نمیکنه. وقتی روی هرکدام از li ها کلیک میکنم هر فقط یکی از تگ های div نمایش داده میشه.

ویرایش شده در توسط unid_user
0

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


لینک به پست

مشابه این منو توی سایت آنیاک است. https://www.learninweb.com/

0

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


لینک به پست

در نهایت کدهای جی کوئری رو به شکل زیر نوشتم و درست هم هست. ولی میدونم این روش اصولی نیست. لطفا راهنمایی کنید. ممنون.

$(document).ready(function() {

  $("#icon1").click(function () {
    $("#item-list2").removeClass("show");
    $("#item-list3").removeClass("show");
    $("#item-list1").addClass("show");
  });
  $("#icon2").click(function () {
    $("#item-list1").removeClass("show");
    $("#item-list3").removeClass("show");
    $("#item-list2").addClass("show");
  });
  $("#icon3").click(function () {
    $("#item-list1").removeClass("show");
    $("#item-list2").removeClass("show");
    $("#item-list3").addClass("show");
  });

});

 

0

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


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

در نهایت کدهای جی کوئری رو به شکل زیر نوشتم و درست هم هست. ولی میدونم این روش اصولی نیست. لطفا راهنمایی کنید. ممنون.

اگر HTML ات این شکلی باشه.

<ul class="icon-div-ul">
	<li data-div-id="item-list1">آیکون 1</li>
	<li data-div-id="item-list2">آیکون 2</li>
	<li data-div-id="item-list3">آیکون 3</li>
</ul>

<div id="item-list1"></div>
<div id="item-list2"></div>
<div id="item-list3"></div>

میشه JS رو اینطوری نوشت.

(function($) {
	$(function() {
		$("ul.icon-div-ul li").click(function() {
			
			var divId = $(this).data("div-id");
			$("div").removeClass("show");
			$("div#"+divId).addClass("show");
			
		});
	});
})(jQuery);

 

1

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


لینک به پست
در ۱ ساعت قبل، mehran-b گفته است :

اگر HTML ات این شکلی باشه.

ممنون درسته.

فقط اینکه من اگه بخوام به هر li به صورت زیر مشخه هایی رو اضافه کنم. برای داینامیک کردن بعدا به مشکل نمیخورم؟

<li data-div-id="item-list3">

 

0

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


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

ممنون درسته.

فقط اینکه من اگه بخوام به هر li به صورت زیر مشخه هایی رو اضافه کنم. برای داینامیک کردن بعدا به مشکل نمیخورم؟

وقتی دارید داینامیک میکنید این موارد هم باید به صورت داینامیک اضافه کنید.

0

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


لینک به پست
در 20 دقیقه قبل، mehran-b گفته است :

وقتی دارید داینامیک میکنید این موارد هم باید به صورت داینامیک اضافه کنید.

لطفا بیشتر توضیح بدید یا یه مثال بزنید. نمیدونم باید چکار کنم.

0

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


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

لطفا بیشتر توضیح بدید یا یه مثال بزنید. نمیدونم باید چکار کنم.

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

مثلا میشه اون li رو توی یه حلقه گذاشت و اون عددش رو توی هر دور حلقه یدونه زیاد کرد.

0

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


لینک به پست
در 29 دقیقه قبل، mehran-b گفته است :

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

مثلا میشه اون li رو توی یه حلقه گذاشت و اون عددش رو توی هر دور حلقه یدونه زیاد کرد.

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

0

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


لینک به پست
در 4 دقیقه قبل، unid_user گفته است :

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

قابل مثال زدن نیست.

مثلا فرض کنیم اگر آیتم های منو اصلی توی یه متغییر به اسم items باشه میشه یه چیزی مثل کد زیر:

$i = 1;

foreach($items as $item) {
	
	echo '<li data-div-id="item-list'.$i.'"></li>';
	
	$i++;
	
}

 

1

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط 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 اون بالا باقی نمیموند.
      میخواستم ببینم آیا من درست فهمیدم ؟ یا مشکلی توی کد هست که اینجوری اجرا میشه ؟!
      باتشکر فراوان
       
    • توسط unid_user
      سلام و درود
      دوستان گرامی، می خوام با کلیک کردن روی یه تگ a هر بار سه تا از تگ های div که کلاس items رو دارن نمایش داده بشه یا به اصطلاح laod بشه.
      شبیه این دکمه توی سایت ها زیاد دیدم و لی آموزش هایی که دربارش هست برای من زیاد مناسب نیست و نتونستم درست کنم.
      با تشکر و سپاس
    • توسط unid_user
      سلام و درود
      دوستان گرامی ، می خوام یه منوی آکاردئونی ساده با جی کوئری ایجاد کنم که وقتی روی هر کدوم از آیتم های منو کلیک میکنی، زیر منوی سایر آیتم ها بسته بشه.
      <nav> <ul id="first-ul"> <li> <a>صفحه اصلی</a> </li> <li> <a>خدمات</a> <ul class="second-ul"> <li> <a>آموزش رباتیک</a> </li> <li> <a>طراحی و ساخت ربات</a> </li> </ul> </li> <li> <a>محصولات</a> <ul class="second-ul"> <li> <a>ربات مسیریاب</a> </li> <li> <a>ربات حل ماز</a> </li> </ul> </li> </ul> </nav> با تشکر و سپاس
    • توسط jistili1
      سلام دوستان.من یک 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 مخفی نمیشه.ممنون میشم کمکم کنید که بفهمم مشکل از کجاست.
    • توسط unid_user
      سلام و درود
      دوستان گرامی ، نمیدونم چرا وقتی صفحه مرورگر رو رفرش میکنم، تمام زیر منوها دیده میشه! کسی میدونه علت چیه.
      با اینکه من تگ ul رو diplay: none دادم.
      با تشکر و سپاس