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

0

Я использую 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}
Теги:

2 ответа

0
Лучший ответ

Когда вы нажимаете, вы можете скрыть все divs с именем "box" и показать только те, которые вы нажали.

Поделиться
  • 0
    Это нормально ... но как я могу сделать так, чтобы показывать только тот div, на который я нажал? Я должен поместить все их идентификаторы в Jquery или что ?!
  • 0
    Когда вы нажимаете на ответ класса, найдите родительский класс с именем «box». $ (Это) .closest ( "окно"). Шоу (). Где это элемент, на который вы нажали.
Показать ещё 3 комментария
0

Поэтому, если я правильно понимаю, проблема заключается в том, что при нажатии кнопки answer отображается весь result div.

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

Во-первых, я не уверен, как работает ваш jQuery прямо сейчас, поскольку вы используете такие классы, как answer-# и result-# где # будет представлять некоторое значение id. Если вам нужен уникальный идентификатор для этих элементов, сгенерируйте 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);
    });
});
Поделиться
  • 0
    Хорошо, я изменил свои классы на идентификаторы: <button id = "answer - {$ question.id}"> ОТВЕТ </ button> и <div id = "result - {$ question.id}" style = "display: none; "> {$ question.id} </ div> .. что мне делать с кодом JQUERY, чтобы указать id для его отображения
  • 0
    @HossamRamadan Вам все еще нужны классы, так как удобнее задавать это поведение на уровне класса. Пожалуйста, перечитайте ответ. Код, который вам нужен, там.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню