Я использую jQuery для управления статьями, хранящимися в базе данных.
Каждая статья разделена на разделы. HTML для типичного раздела выглядит так:
<section id="directions" data-toggle="collapse" data-target="#directions2" class="SecCon"> <h2><span class="label label-primary"><small><span class="only-collapsed glyphicon glyphicon-chevron-down"></span><span class="only-expanded glyphicon glyphicon-remove-sign"></span></small> Directions</span> </h2> <div id="directions2" class="collapse in article"> <p>Animals have the power of locomotion.</p> </div> <section> Он отлично работает; в сочетании с некоторыми сценариями jQuery, он отображает каждый заголовок в виде кнопки, которую можно щелкнуть, чтобы открыть или закрыть этот раздел, отображая текст или скрывая его.
Единственное, что меня беспокоит, это раздувание кода; У меня есть сотни статей, чтобы выйти в интернет, и добавление всего этого кода, глификонов и т. Д. Превращается в боль.
Поэтому представьте, если бы я сконденсировал все до тега первого абзаца:
<section> <h2>Directions</h2> <div>
Это будет храниться в моей базе данных, но отображение может быть изменено с помощью str_replace и регулярным выражением, чтобы заполнить пробелы, превратив их в блок кода, который я разместил выше. И если «Направления» были заменены на «Экология», тогда это было бы одинаково, за исключением того, что каждый экземпляр «направлений» заменяется «экологией».
Дополнительным преимуществом является то, что я мог бы внести существенные изменения в код без необходимости изменять все мои таблицы базы данных.
Прежде чем я погрузился в этот проект, я просто задавался вопросом, может ли кто-нибудь сказать мне, является ли эта работоспособная схема или немой идеей. Есть ли лучший способ сделать это?
Продолжайте и храните HTML без дополнительной разметки.
<section> <h2>Directions</h2> <div>Some directions</div> </section> <section> <h2>Ecology</h2> <div>Ecology info</div> </section>
Вы можете использовать javascript / jQuery для добавления id, пролетов и классов без каких-либо проблем. Попробуйте что-нибудь подобное ( демо ):
$(function () { $('section').each(function () { var html, $this = $(this), $h2 = $this.children('h2'), sectionId = $h2.text().toLowerCase(); $this.attr({ class : 'SecCon', id : sectionId, 'data-toggle' : 'collapse', 'data-target' : '#' + sectionId + '2' }); $h2.wrapInner('<span class="label label-primary"/>'); html = '<small>' + '<span class="only-collapsed glyphicon glyphicon-chevron-down"></span>' + '<span class="only-expanded glyphicon glyphicon-remove-sign"></span>' + '</small>'; $h2.find('.label').prepend(html); $this.children('div').attr({ class : 'collapse in article', id : sectionId + '2' }); }); });