JQuery & PHP для отображения таблиц в цикле

Question

Я использую JQuery и PHP для отображения вопросов & Ответы в таблицах .. Я использую FOREACH LOOP для печати результатов, но я не знаю, как показать только один вопрос в щелчку, это мой код:

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

$('$#answer').click(function(){ 

    $('#result').fadeIn("slow").delay(1000); 



    }); 
    }); 
</script> 
{foreach $essay as $question} 
<div style="float: right;width:72%;margin-right:20px;"> 
<div class="menuhead"> 
{$ci->lang->line('question')} 
</div> 
      <div class="box"> 
      <button id="answer-{$question.id}" >ANSWER</button> 
     <p style="text-align:left;font-weight:bold;">{$question.question}</p> 
     <p style="text-align:left;font-weight:bold;"><span style="color:#001cac;font-weight:bold;">{$ci->lang->line('answers')}:</span> {$ci->essay->answers_count($question.id)}</p>  
     </div> 
     </div> 

     <div id="result-{$question.id}" style="display:none;">{$question.id}</div> 
     {/foreach} 

другой код «не работает также :(»

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.answer').click(function(){ 
     var i = $('.answer').index(this); 
     $('.result').eq(i).fadeIn("slow").delay(1000); 
    }); 
}); 
</script> 
{foreach $essay as $question} 
<div style="float: right;width:72%;margin-right:20px;"> 
<div class="menuhead"> 
{$ci->lang->line('question')} 
</div> 
      <div class="box"> 
     <button id="answer-{$question.id}" class="answer">ANSWER</button> 
     <p style="text-align:left;font-weight:bold;">{$question.question}</p> 
     <p style="text-align:left;font-weight:bold;"><span style="color:#001cac;font-weight:bold;">{$ci->lang->line('answers')}:</span> {$ci->essay->answers_count($question.id)}</p>  
     </div> 
     </div> 

     <div id="result-{$question.id}" class="result" style="display:none;">{$question.id}</div> 
     {/foreach} 

Answer 1

при нажатии кнопки, вы можете скрыть все дивы с именем «окно »и покажите только теги, которые вы нажали.

Answer 2

Так что, если я правильно понял, вы проблема в том, что при нажатии кнопки answer все result div's показаны.

У вас потенциально две проблемы.

Во-первых, я не уверен, как работает ваш jQuery прямо сейчас, поскольку вы используете такие классы, как answer-# и result-#, где # будет представлять некоторое значение id. Если вам нужен уникальный идентификатор для этих элементов, то сгенерируйте идентификатор id в свойстве элемента, а не в классе. Ваш элемент, вероятно, следует искать что-то вроде:

<button id="answer-{$question.id}" class="answer">ANSWER</button> 

Во-вторых, вы делаете никаких попыток в вашем JQuery, чтобы связать кнопку не нажал с соответствующим целевым делением, чтобы показать. Вы должны использовать $(this) для определения фактического элемента щелчка и работы оттуда соответственно.

Это немного затруднено из-за отсутствия общего родительского элемента в DOM. Поэтому, не видя полного HTML и не зная, как наиболее конкретно их связывать, я бы предложил использовать подход для определения индекса нажатой кнопки ответа и показать результат div с тем же значением индекса. Конечно, это предполагает, что существует взаимно однозначная корреляция между значением индекса элементов в этих коллекциях и что значение индекса для ответа соответствует значению индекса для результата.

$(document).ready(function(){ 
    $('.answer').click(function(){ 
     var i = $('.answer').index(this); 
     $('.result').eq(i).fadeIn("slow").delay(1000); 
    }); 
});