Сделайте так, чтобы каждый щелчок по событию «Читать дальше» отображал данные в таблице HTML не одновременно
Я получаю данные из таблицы SQL для отображения в таблице HTML. Проблема в том, что я хочу сохранить данные в событии «Подробнее», чтобы таблица не была беспорядочной.
Поскольку я получаю данные по строкам, я использую имя класса в JQuery. Как сделать так, чтобы событие «Подробнее» работало не для всех строк одновременно? Вот мой код.
$('[class^ = "text1"]').hide();
$('button[class^ = "toggle1"]').click(function() {
var elem = $('#toggle').text();
if (elem == "Read More") {
//alert('hiii');
//Stuff to do when btn is in the read more state
$('button[class^ = "toggle1"]').text("Read Less");
$('.text1').slideDown();
} else {
//Stuff to do when btn is in the read less state
$('button[class^ = "toggle1"]').text("Read More");
$('.text1').slideUp();
}
});<td width = "30%"><label>
<p id = "text" class='text1'><?php echo ($row['StartDate'] )?></p>
<button type='button' id = "toggle" class='toggle1' style = "background:
none; border:none; padding: 0; cursor: pointer; border-bottom:1px solid
#444;">Read More</button>
</label>
</td>Я ожидал, что код будет таким:
each.$('button[class^ = "toggle1"]').click(function() {
чтобы не все события «Подробнее» запускались одновременно.
Это пример моей работы:
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если я вас правильно понял, у вас много строк, теги id и class похожи. В этом случае вам лучше понадобится цикл for для их создания, который создаст уникальный идентификатор / класс для каждой строки, чтобы вы могли получить доступ из своего сопоставителя регулярных выражений JQuery к идентификатору, который соответствует только одной строке или идентификатору / классу.
да это моя главная проблема. Я постараюсь воспользоваться вашим предложением. Большое спасибо !
вы можете использовать $ (Selector) .html ("данные успеха ajax"); событие, чтобы получить это внутри определения div при нажатии, а затем вы также можете скрыть его, сделав $ selector.html ("");