رفتن به مطلب

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


پست های پیشنهاد شده

سلام و درود

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

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

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

با تشکر و سپاس

لینک به ارسال

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

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

});

 

لینک به ارسال

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

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

با تشکر و سپاس

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

سلام و درود @unid_user

 

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

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

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

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

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

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

 

لینک به ارسال
$(document).ready(function() {
$("ul.icon-div-ul li").click(function () {
  $(".item-div").find(".item-list1").addClass('show');

});

});

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

ویرایش شده توسط unid_user
لینک به ارسال

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

$(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");
  });

});

 

لینک به ارسال
در ۱ ساعت قبل، 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);

 

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

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

ممنون درسته.

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

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

 

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

ممنون درسته.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$i = 1;

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

 

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...