Я использую 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}
Когда вы нажимаете, вы можете скрыть все divs с именем "box" и показать только те, которые вы нажали.
Поэтому, если я правильно понимаю, проблема заключается в том, что при нажатии кнопки 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);
});
});