2013-11-17 3 views
1

Я создаю страницу, на которой будет отображаться дополнительный контент, когда пользователь нажимает кнопку. Это нормально, я могу сделать это с помощью javascript или jQuery. Что-то вроде этого.Выявление скрытого содержимого при использовании цикла while

<img id="doit" src="images/button_reddot.gif" width="125" height="22"> 
<script> 
$("img#doit").click(function() { 
$("#hiddenstuff").show("slow"); 
}); 
</script> 
<table id="hiddenstuff" style="display:none" class="hotelform"> 
<tr class="hotelformborder"> 
<td>Extra content</td> 
</tr> 
</table> 

Проблема возникает, когда я переношу этот код в цикл PHP while, чтобы отображать его версии несколько раз. Независимо от того, какую кнопку я нажимаю, скрытый контент всегда отображается в первом рендеринге цикла.

Как сделать отображение скрытого контента во втором рендеринге цикла, когда я нажимаю вторую кнопку и т. Д.?

РЕШЕНИЕ

Как пояснил Рори, проблема была повторяющееся использованием идентификаторов. Однако использование классов не совсем сработало, так как скрытый контент был обнаружен во всех визуализациях цикла, когда была нажата только одна кнопка. Это действительно заставило мой мозг работать в другом направлении, поэтому я установил переменную $ i и увеличил ее с каждым циклом. Тогда Идентификаторы стали

id="doit<?php echo $i ?>" 

и

id="hiddenstuff<?php echo $i ?>" 

Проблема решена! Спасибо Рори и другим, кто внес свой вклад. StackOverflow - удивительное место.

+3

Пожалуйста, покажите, как вы завернуты этот код в PHP while loop – kero

+0

Проблема заключается в том, что при использовании цикла вам необходимо убедиться, что идентификатор остается уникальным в документе. В этом случае лучше использовать значения классов –

ответ

1

Проблема заключается в том, что в вашей петле используются атрибуты id, что приводит к множественным идентификаторам, но они должны быть уникальными. Попробуйте использовать классы вместо:

<img class="doit" src="images/button_reddot.gif" width="125" height="22" /> 
<table class="hiddenstuff" style="display:none" class="hotelform"> 
    <tr class="hotelformborder"> 
     <td>Extra content</td> 
    </tr> 
</table> 

Вы можете затем поместить Ваш <script /> в <head /> как одна функция может контролировать все элементы, созданные в рамках цикла:

<script type="text/javascript"> 
    $(function() { 
     $('img.doit').click(function() { 
      $(this).next('.hiddenstuff').show('slow'); 
     }); 
    }); 
</script> 
Смежные вопросы