سوال jquery

wSaman · آذر 92

سلام

من یه مشکلی که دارم اینه که وقتی رو یه div کلیک میکنم همه p ها toggle میشن در صورتی که میخوام p همون div فقط toggle بشه البته بدون دادن ID به div یا p ها


<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("div").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<div>Toggle
<p>This is a paragraph with little content.</p>

<p>This is another small paragraph.</p>
</div>
<div>Toggle
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</div>
<div>Toggle
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</div>
</body>
</html>

ویرایش شده آذر 92 توسط wSaman

imanfakhar · آذر 92


$(document).ready(function(){
$("div").click(function(){
$(this).find("p").toggle();
});
});

wSaman · آذر 92

تشکر این شد

ولی مشکلی که هست وقتی div رو با ID میخونی فقط روی اولی کار میکنه

یعنی


<div id="aa">Toggle
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</div>
<div id="aa">Toggle
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</div>

که اینجوری مینویسم


$(document).ready(function(){
$("#aa").click(function(){
$(this).find("p").toggle();
});
});

البته میشه اینجوری نوشت که کار میکنه:


$(document).ready(function(){
$("div#aa").click(function(){
$(this).find("p").toggle();
});
});

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


$(document).ready(function(){
$('.post').click(function(){
$(this).children('.infoboxa').slideToggle("slow");
});
});

ولی این کد فقط رو همون html کار میکنه!

ویرایش شده آذر 92 توسط wSaman

imanfakhar · آذر 92

آی دی یک نشانه شخصی است که فقط باید روی یک عنصر در صفحه باشد class حکم نام خانوادگی را دارد که در بین عناصر صفحه می تواند مشترک باشد

اگر در حال یاد گیری jquery هستید سعی کنید اصول اولیه html را کامل را رعایت کنید آنالیز صحیح خواستتون و ترسیم الگوریتم صحیح ازش نکته ی اول است

این کد شما


<div id="aa">Toggle
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</div>
<div id="aa">Toggle
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</div>

می تونه به این صورت اصلاح بشه


<div id="aa">
<div>Toggle
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</div>
<div>Toggle
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</div>
</div>

<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#aa>div").click(function() {
$(this).find("p").toggle();
})
})
</script>

برای ساخت یک منوی درختی کدی شبیه به این مورد نیازتونه


<ul>
  <li>item 1
    <ul>
	   <li>sub item 1-a </li>
   <li>sub item 1-a</li>
   <li>sub item 2-a</li>
   <li>sub item 2-b  </li>
   <li>sub item 1-a</li>
   <li>sub item 1-b</li>
   <li>sub item 1-b</li>
   <li>sub item 1-b</li>
	 </ul>
  </li>
  <li>item 2
    <ul>
	  <li>sub item 2-a</li>
	  <li>sub item 2-b  </li> 
  <li>sub item 1-a</li>
<li>sub item 1-b</li>
</ul>
</li>
</ul>
<script>function handler(event) {
  var $target = $(event.target);
  if( $target.is("li ul li ul li") ) {
    $target.children().slideToggle("slow");
  }
  else
  if( $target.is("li ul li") ) {
    $target.children().slideToggle("slow");
  }
  else
  if( $target.is("li") ) {
    $target.children().slideToggle("slow");
  }
}
$("ul").click(handler).find("ul").hide();
</script>

wSaman · آذر 92

ممنون از شما

ویرایش شده آذر 92 توسط wSaman

ورود

سوال jquery

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

wSaman 6

لینک به ارسال

imanfakhar 26231

لینک به ارسال

wSaman 6

لینک به ارسال

imanfakhar 26231

لینک به ارسال

wSaman 6

لینک به ارسال

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

فهرست بخش ها

فعالیت ها