ورود

View Full Version : مبتدی: نحوه تعریف سلکتور و اکشن برای تعداد نامشخص المنت؟



Qaflanti
یک شنبه 20 فروردین 1391, 01:10 صبح
سلام؛
من یه صفحه php دارم که از دیتابیس یه سری عنوان و محتوا رو میگیره؛ بعد عناوین رو بصورت فهرست وار نمایش میده و محتوای مربوط به هر عنوان رو بصورت مخفی (display:none) زیرش قرار میده:

<table>
<tr><td><a id="link1" style="cursor: pointer;">لینک اول</a></td></tr>
<tr id="content1" style="display: none;"><td>محتوای اول</td></tr>
<tr><td><a id="link2" style="cursor: pointer;">لینک دوم</a></td></tr>
<tr id="content2" style="display: none;"><td>محتوای دوم</td></tr>
<tr><td><a id="link3" style="cursor: pointer;">لینک سوم</a></td></tr>
<tr id="content3" style="display: none;"><td>محتوای سوم</td></tr>
.
.
.
<tr><td><a id="linkn" style="cursor: pointer;">لینک nام</a></td></tr>
<tr id="contentn" style="display: none;"><td>محتوای nام</td></tr>
</table>

حالا می خوام کاری کنم که هر وقت کاربر روی هر کدوم از این عناوین کلیک کرد محتوای مربوط بهش زیرش بصورت اسلاید باز و بسته شه (تابع slideToggle).
من برای تعداد مشخص لینک می تونم کد جی کوئری بنویسم یعنی بصورت جدا جدا؛ مثلا:
$(document).ready(function(){
$("#link1").click(function(){
$("#content1").slideToggle();
});
$("#link2").click(function(){
$("#content2").slideToggle();
});
$("#link3").click(function(){
$("#content3").slideToggle();
});
.
.
.
$("#linkn").click(function(){
$("#contentn").slideToggle();
});
});

اما این مدل کد نوشتن خب خیلی ضایعست! یه سری کد تکراری 10-20 بار پشت سر هم نوشته میشه!
از طرفی هم من نمی دونم تو هر بار باز شدن صفحه نتیجه کوئری چندتا لینکه، یه بار هیچی، یه بار 10 تا، یه بارم شاید 100 تا!
واسه همین می خوام یه کد کلی بنویسم که وقتی روی لینک k کلیک شد محتوای k اسلاید بشه که خب بلد نیستم!
راهنمایی می فرمایید!؟

plague
یک شنبه 20 فروردین 1391, 21:36 عصر
بجای آیدی از کلاس استفاده میکنن در همچین مواقعی


<tr><td><a class="link" style="cursor: pointer;">لينک اول</a></td></tr>
<tr class="content" style="display: none;"><td>محتواي اول</td></tr>



$('.link').click(function(){
$(this).parent().parent().siblings('.content').tog gle();
})

Qaflanti
دوشنبه 21 فروردین 1391, 00:04 صبح
خب اگه از کلاس استفاده می کردم با کلیک روی هر لینکی تمام محتوا ها اسلاید میشدن!

مشکلمو این طوری حل کردم:

<a href="javascript:void(0)" onClink="$("#contentn").slideToggle();">لینک nام</a>

plague
دوشنبه 21 فروردین 1391, 08:04 صبح
خیر فقط محتوای هر لینک نمایش داده میشه نه همشون

$(this).parent().parent().siblings('.content').tog gle();
این دستور باعث میشه که روی هر لینک کلیک شد فقط content بعد از اون نمایش داده بشه نه همه



اون روشی که شما به کار بردین خوبه ولی برای جاهایی که تکرار میشن المنت ها و تعدادشون مشخص نیست بهترین روش استفاده از کلاس در html و sibling , parent در jquery برای شناسایی المنت مورد نظره