jQuery Show/Hide divs с использованием того же класса не работает из-за html.push?

Цель состоит в том, чтобы показать-скрыть текст, расположенный под соответствующими заголовками, чтобы пользователь читал заголовок и отображал или скрывал текст, принадлежащий этому заголовку, если пользователь хочет прочитать больше.

Я пробовал все, что мог найти здесь, мы говорим о динамической настройке текста, поступающего из электронной таблицы, не можем использовать идентификаторы, должны работать с .class, должно быть что-то упущено, у меня есть этот фрагмент кода:

... html.push('<div class="comments">' + comment + '</div></div></div>');

но когда я пытаюсь использовать этот код Show-Hide, ничего не происходит, даже если консоль ошибок ничего не показывает. По сути, я хочу показать-скрыть разделы класса .comments с помощью ссылки переключения «показать-скрыть», расположенной под каждым из них. Я говорю их, потому что .comments div воспроизводятся динамически при извлечении текста из ячеек/строки электронной таблицы Google (один .comments div на строку электронной таблицы). Я пробовал .next, child и parent, но все они развелись со мной, поэтому я не знаю, похоже на динамическую проблему. До сих пор мне удалось только глобально переключить все div в видимое или скрытое состояние, но мне нужно независимо переключать отдельные div.

Я предпочитаю решение jQuery, но все, что работало до сих пор, было достигнуто с помощью собственного javascript.

Примечание. Если бы было проще реализовать кросс-браузерную функцию усечения, которая добавляла бы ссылку «больше-меньше» после ряда слов (var) в каждом .comments div, я бы с удовольствием выбрал этот вариант. Спасибо за любую помощь, помните, я все еще учусь, лол!


class html toggle push show-hide
person DaNCh    schedule 14.12.2011    source источник
comment
html.push('<div style="display:none;" class="comments">' + comment + '</div><button class="toggle">more</button></div></div>'); тоже не работал с $('button.toggle').click(function() { $(this).prev('div').toggle(); });. Я проверил с помощью alert(), как упоминал Скотт Э. ниже, и он дал 0. Хммм.   -  person DaNCh    schedule 14.12.2011

Ответы (1)


arrow_upward
1
arrow_downward

Я работал над полностью проектом пользовательского интерфейса JS и заставил себя использовать $('', { properties }).appendTo(BaseElement), чтобы лучше всего работать для добавления элементов HTML, потому что он каждый раз соответствующим образом манипулирует DOM.

Однако, если вам повезло с push в другом месте, поставьте точку останова на строке, где вы делаете свой $('.class').hide() и посмотрите, что такое $('.class').length. В качестве альтернативы вы можете просто добавить alert($('.class').length) в свой код, если вы не можете поставить точку останова в коде. Если он равен 0, то ваши элементы не были должным образом добавлены в DOM. Изменение на добавление гарантирует, что они являются частью DOM и, следовательно, доступны через JQuery.

person Scott E    schedule 14.12.2011
comment
Да, я также работаю над пользовательским интерфейсом JS и связанными с ним гаджетами Google link< /а>. Это выше меня на данный момент, но я должен найти решение. Я думаю, что подойдет любой способ получения данных ячейки, push или без push, но я еще не на том уровне, чтобы полностью понять, как это сделать. Я попробую добавить штучку, как вы упомянули. Спасибо за указатели. - person DaNCh; 14.12.2011
comment
Без проблем. Я использую метод .appendTo уже несколько месяцев, и он прекрасно работает. Для приведенного выше примера правильным кодом будет: $('<div/>', {'style': 'display: none;', 'class': 'comments', 'html': comment}).click(function() { }).appendTo(html); или что-то в этом роде. - person Scott E; 15.12.2011
comment
Ах, ДОМ! Получил что-то работающее, заменив соответствующие экземпляры html.push на $jq('<div class="expandable">' + comment + '</div></div></div>').appendTo(texte);, где texte является переменной, которая устанавливает html в целевые элементы div. var $jq = jQuery.noConflict(); позволяет мне комбинировать две используемые библиотеки. Обнаружено использование each() для поиска и применения кликабельной функции к заголовкам, которая позволяет разворачивать-сворачивать их next() скрытое содержимое. Использование e.stopImmediatePropagation(); закрытия each() необходимо в моем случае. Спасибо за appendTo() совет, Скотт Э! - person DaNCh; 17.12.2011