استفسار عن كود jQuery

بدأه Waleed-KH في 30 أغسطس 2012 · 4 رد · 849 مشاهدة · في قسم البرمجة بــ Javascript

#130 أغسطس 2012 في 00:45 صاحب الموضوع

السلام عليكم

في الصفحه دي

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl"  class="ahome">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title></title>
	<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

        $(".subnav1").hide();
        $(".nd1").show();

    $('.nd1').click(function(){
    $(".subnav1").toggle('',function(){$('.nav1').toggleClass('active', $(this).is(':visible'));});
    });


        $(".subnav2").hide();
        $(".nd2").show();

    $('.nd2').click(function(){
    $(".subnav2").toggle('',function(){$('.nav2').toggleClass('active', $(this).is(':visible'));});
    });


        $(".subnav3").hide();
        $(".nd3").show();

    $('.nd3').click(function(){
    $(".subnav3").toggle('',function(){$('.nav3').toggleClass('active', $(this).is(':visible'));});
    });

});

</script>

</head>

						<ul>
							<li class="nav1">
								<div class="nd1"><p>text</p></div>
								<ul class="subnav1" >
									<li><a href="#"><p>text</p></a></div></li>
									<li><a href="#"><p>text</p></a></div></li>
									<li><a href="#"><p>text</p></a></div></li>
									<li><a href="#"><p>text</p></a></div></li>
								</ul>
							</li>
						</ul>
						<ul>
							<li class="nav2">
								<div class="nd2"><p>text</p></div>
								<ul class="subnav2" >
									<li><a href="#"><p>text</p></a></div></li>
									<li><a href="#"><p>text</p></a></div></li>
									<li><a href="#"><p>text</p></a></div></li>
									<li><a href="#"><p>text</p></a></div></li>
								</ul>
							</li>
						</ul>
						<ul>
							<li class="nav3">
								<div class="nd3"><p>text</p></div>
								<ul class="subnav3" >
									<li><a href="#"><p>text</p></a></div></li>
									<li><a href="#"><p>text</p></a></div></li>
									<li><a href="#"><p>text</p></a></div></li>
									<li><a href="#"><p>text</p></a></div></li>
								</ul>
							</li>
						</ul>
</body>

</html>

اقوم بتكرار كود jQuery عند وضع قوائم جديده و اريد كود جديد لا اضطر لتكراره عند وضع قائمه جديده

بمعني اني عايز اعرف ازاي اضيف قوائم

						<ul>
							<li class="nav1">
								<div class="nd1"><p>text</p></div>
								<ul class="subnav1" >
									<li><a href="#"><p>text</p></a></div></li>
									<li><a href="#"><p>text</p></a></div></li>
									<li><a href="#"><p>text</p></a></div></li>
									<li><a href="#"><p>text</p></a></div></li>
								</ul>
							</li>
						</ul>

من غير ما اضطر اعملها كود jQuery مخصص

 
        $(".subnav1").hide();
        $(".nd1").show();

    $('.nd1').click(function(){
    $(".subnav1").toggle('',function(){$('.nav1').toggleClass('active', $(this).is(':visible'));});
    });

يعني عايز كود jQuery يخلي لما ادوس علي nd* تظهر القائم الفرعيه بتاعتها subnav* و تغير استايل nav* لactive من غير ما اضطر اعمل لكل واحد كود مخصص

اتمني اني اكون وضحت اللي عايزو

و شكرا للمساعده

تم تعديل هذه المشاركة بواسطة Waleed-KH في 30 أغسطس 2012 في 00:49

#230 أغسطس 2012 في 01:10

هذا التعديل في Javascript:

<script type="text/javascript">
$(document).ready(function(){

        $(".subnav").hide();
        $(".nd").show();

    $(".nd").click(function(){
		$(this).next(".subnav").toggle(function(){
				$(this).parent(".nav").toggleClass('active', $(this).is(":visible"));
			}
		)
	});
});
</script>

وهذا تعديل (أسماء الكلاسات)، جميعها تصبح تحمل ذات الاسم ويتم تحديد العناصر المطلوبة بـ .next(...) و .parent(...) في jQuery.

<ul>
		<li class="nav">
				<div class="nd"><p>text 1</p></div>
				<ul class="subnav" >
						<li><a href="#"><p>text 1-1</p></a></div></li>
						<li><a href="#"><p>text 1-2</p></a></div></li>
						<li><a href="#"><p>text 1-3</p></a></div></li>
						<li><a href="#"><p>text 1-4</p></a></div></li>
				</ul>
		</li>
</ul>
<ul>
		<li class="nav">
				<div class="nd"><p>text 2</p></div>
				<ul class="subnav" >
						<li><a href="#"><p>text 2-1</p></a></div></li>
						<li><a href="#"><p>text 2-2</p></a></div></li>
						<li><a href="#"><p>text 2-3</p></a></div></li>
						<li><a href="#"><p>text 2-4</p></a></div></li>
				</ul>
		</li>
</ul>
<ul>
		<li class="nav">
				<div class="nd"><p>text 3</p></div>
				<ul class="subnav" >
						<li><a href="#"><p>text 3-1</p></a></div></li>
						<li><a href="#"><p>text 3-2</p></a></div></li>
						<li><a href="#"><p>text 3-3</p></a></div></li>
						<li><a href="#"><p>text 3-2</p></a></div></li>
				</ul>
		</li>
</ul>

تم تعديل هذه المشاركة بواسطة Xacker في 30 أغسطس 2012 في 03:41

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#330 أغسطس 2012 في 02:42

Xacker كتب:

هذا التعديل في Javascript:

<script type="text/javascript">
$(document).ready(function(){

        $(".subnav").hide();
        $(".nd").show();

    $(".nd").click(function(){
		$(this).next(".subnav").toggle(function(){
				$(this).prev(".nav").toggleClass('active', $(this).is(":visible"));
			}
		)
	});
});
</script>

وهذا تعديل (أسماء الكلاسات)، جميعها تصبح تحمل ذات الاسم ويتم تحديد العناصر المطلوبة بـ .next(...) و .prev(...) في jQuery.

<ul>
		<li class="nav">
				<div class="nd"><p>text 1</p></div>
				<ul class="subnav" >
						<li><a href="#"><p>text 1-1</p></a></div></li>
						<li><a href="#"><p>text 1-2</p></a></div></li>
						<li><a href="#"><p>text 1-3</p></a></div></li>
						<li><a href="#"><p>text 1-4</p></a></div></li>
				</ul>
		</li>
</ul>
<ul>
		<li class="nav">
				<div class="nd"><p>text 2</p></div>
				<ul class="subnav" >
						<li><a href="#"><p>text 2-1</p></a></div></li>
						<li><a href="#"><p>text 2-2</p></a></div></li>
						<li><a href="#"><p>text 2-3</p></a></div></li>
						<li><a href="#"><p>text 2-4</p></a></div></li>
				</ul>
		</li>
</ul>
<ul>
		<li class="nav">
				<div class="nd"><p>text 3</p></div>
				<ul class="subnav" >
						<li><a href="#"><p>text 3-1</p></a></div></li>
						<li><a href="#"><p>text 3-2</p></a></div></li>
						<li><a href="#"><p>text 3-3</p></a></div></li>
						<li><a href="#"><p>text 3-2</p></a></div></li>
				</ul>
		</li>
</ul>

شكرا علي المساعده

بس استايل nav مش بيتغير بعد الضغط

#430 أغسطس 2012 في 03:00

استبدل هذا الجزء:

$(this).parent(".nav").toggleClass('active', $(this).is(":visible"));

* قمت بتعديل المشاركة السابقة.

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#530 أغسطس 2012 في 11:28

Xacker كتب:
استبدل هذا الجزء:
$(this).parent(".nav").toggleClass('active', $(this).is(":visible"));
* قمت بتعديل المشاركة السابقة.

متشكرا جدا علي المساعده :)

جزاك الله خيرا

مواضيع مشابهة

أريد كود Poll Jquery0 رد · 6 يناير 2009
استفسار عن هذا الكود في عمليه الاتصال بقاعده البيانات عن طريق الكود2 رد · 15 مايو 2006
سؤال عن كود ؟ (تحريك صور jQuery banner rotator)3 رد · 23 يونيو 2012
استفسار في كود برنامج شؤون الموظفين2 رد · 25 يونيو 2003
استفسار عن كود لو تكرمتم5 رد · 15 يوليو 2007
نوافذ استعلامية وتنبيهية بال Jquery0 رد · 28 يناير 2009