مشکل با next در jquery

[farnaz.saeedi]

با سلام
من همچین کدی تو برنامه ام دارم:


<div class="question_answer">
<a id="answer" style="cursor:pointer">پاسخ دادن</a>
</div>
<div class="javab">
.
.
.
</div>

میخوام وقتی روی پاسخ دادن کلیک کردم محتوای دایو javab که الان بصورت display:none هست نشون داده بشه
چون تعداد این کدهام بیشتر از یکی هست نمیتونم از این کد استفاده کنم:


$(document).ready(function()
{
$('#answer').click(function()
{
$('div.javab').attr("class","javab_click");
})
});

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


$(document).ready(function()
{
$('#answer').click(function()
{
$('this').next('div.javab').attr("class","javab_click");
})
});

این کد مثلا قراره خصوصیت اولین دایو با کلاس javab و عوض کنه ولی چون این دایو بیرون از دایوی هست که ایدیش answer هست کار نمیکنه
چطوری میتونم اولین دایو با کلاس javab و (حالا هر جای برنامه )دستکاری کنم؟

[blackmak]

لطفا کل سورس html + css + jquery رو بذارید تا کمکتون کنیم

[farnaz.saeedi]

لطفا کل سورس html + css + jquery رو بذارید تا کمکتون کنیم
کدهای html و jquery که فک میکنم کامل و واضح باشه
کدهای css مربوط به این دوتا دایو به این صورته:

.javab{width:604px; float:right; margin-top:10px; display:none}
.javab_click{width:604px; float:right; margin-top:10px;}

ببینید من چطوری میتونم اولین دایو با کلاس javab و با زدن کلید "پاسخ دادن" پیدا کنم؟

[blackmak]

منظورتون این هستش ؟

<style>
.javab{width:604px; float:right; margin-top:10px; visibility:hidden}
.javab_click{width:604px; float:right; margin-top:10px; visibility:visible}
</style>

<script src="jquery.js" type="text/javascript"></script>
<script>
$(function()
{
$('.question_answer').click(function()
{
$(this).next('div').removeClass("javab");
$(this).next('div').addClass("javab_click");
})
});
</script>

<div class="question_answer">
<a id="answer" style="cursor:pointer">پاسخ دادن</a>
</div>
<div class="javab">
جواب پاسخ
</div>
<br/>
<div class="question_answer">
<a id="answer" style="cursor:pointer">پاسخ دادن</a>
</div>
<div class="javab">
جواب پاسخ
</div>
<br/>
<div class="question_answer">
<a id="answer" style="cursor:pointer">پاسخ دادن</a>
</div>
<div class="javab">
جواب پاسخ
</div>
<br/>

[blackmak]

یا به این شکل هم میشه

<style>
.javab{width:604px; float:right; margin-top:10px; visibility:hidden}
.javab_click{width:604px; float:right; margin-top:10px; visibility:visible}
</style>

<script src="jquery.js" type="text/javascript"></script>
<script>
$(function()
{
$('.answer').click(function()
{
$(this).parent().next('div').removeClass("javab");
$(this).parent().next('div').addClass("javab_click");
})
});
</script>

<div class="question_answer">
<a class="answer" style="cursor:pointer">پاسخ دادن</a>
</div>
<div class="javab">
جواب پاسخ
</div>
<br/>
<div class="question_answer">
<a class="answer" style="cursor:pointer">پاسخ دادن</a>
</div>
<div class="javab">
جواب پاسخ
</div>
<br/>
<div class="question_answer">
<a class="answer" style="cursor:pointer">پاسخ دادن</a>
</div>
<div class="javab">
جواب پاسخ
</div>
<br/>

[farnaz.saeedi]

مرسی که وقت گذاشتین و این کدهارو نوشتین.ولی من هنوز مشکلم حل نشده
این کدها درصورتی جواب میدن که دایو با کلاسjavab بلافاصله بعد از دایو با کلاس question_answer باشه اما من بین اینها بازهم یکسری دایو دارم به این شکل


for ($i=0; $i<$num; $i++)
{
?>
<div class="question_div"><!--asked question start-->
<div class="left_content_top"></div>
<div class="left_content_side"><!-- asked side start-->
<div class="asked_name">
<b>سوال از:</b><?php echo $name[$i];?><br />
<b>در تاریخ:</b><?php echo $date[$i];?>
</div>
<div class="asked_text">
<b>عنوان:</b><?php echo $header[$i];?><br />
<p align="justify" style="margin-top:-1px;"><?php echo $text[$i];?></p>
</div>
<div class="question_options"><!--ask options start-->
<div class="question_delete">
<a id="delete" style="cursor:pointer">حذف سوال</a>
</div>
<div class="question_answer">
<a id="answer" style="cursor:pointer">پاسخ دادن</a>
</div>
</div><!--ask options end-->
<div class="left_content_down"></div>
</div><!-- asked side end-->
</div><!--asked question end-->
<div class="javab"><!--javab start-->
<div class="left_content_top"></div>
<div class="left_content_side"><!-- javab side start-->
<div class="asked_name">
<b>پاسخ شما</b>
</div>
<div class="asked_text">
<p align="justify" style="margin-top:-1px;"><textarea name="jvb" class="question_textarea"></textarea></p>
<input type="button" name="javab_btn" value="" class="send_ask_btn" />
</div>
<div class="left_content_down"></div>
</div><!-- asked side end-->
</div><!--asked question end-->

در واقع میخوام وقتی کاربر روی دکمه پاسخ دادن کلیک کرد یه کادر که همو ن کادر جواب هست زیر سوال باز بشه واسه جواب دادن
الان چون اسم همه یکیه(javab) وقتی رو پاسخ دادن کلیک میشه همه کادرهای زیر همه سوالات باز میشه
بازم ممنون

[blackmak]

خوب شما یه شمارنده دارید به نام $i حالا هر جا که دارین id میدیدن اینطور id بدیین : فرض برای سئوال 1 بدید question_1 و برای جواب 1 بدید answer_1 و به همین ترتیب question_2 , answer_2 و ... این 1 و 2 و3 و 4 و ... هم با $i ساخته میشه و بعد توی jquery اینطور عمل کنید :

<style>
.javab{width:604px; float:right; margin-top:10px; visibility:hidden}
.javab_click{width:604px; float:right; margin-top:10px; visibility:visible}
</style>

<script src="jquery.js" type="text/javascript"></script>
<script>
$(function()
{
$('.answer').click(function()
{
// idye ooni ke roosh click shodaro migire masalan : answer_1
var id = $(this).attr('id');
// shomareye tahesho azash joda mikone masalan : answer_1 --> 1
id = id.substr(7);
// bad baraye visible kardane oon div ke marboot be javabe oon shomararo ba javab_ jam mikone masalan : javab_1
$('#javab_'+id).removeClass("javab");
$('#javab_'+id).addClass("javab_click");
})
});
</script>

<div class="question_answer">
<a id="answer_1" class="answer" style="cursor:pointer">پاسخ دادن</a>
</div>
<div id="javab_1" class="javab">
جواب
</div>

<div class="question_answer">
<a id="answer_2" class="answer" style="cursor:pointer">پاسخ دادن</a>
</div>
<div id="javab_2" class="javab">
جواب
</div>

<div class="question_answer">
<a id="answer_3" class="answer" style="cursor:pointer">پاسخ دادن</a>
</div>
<div id="javab_3" class="javab">
جواب
</div>