Question

我正在使用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和正则表达式修改显示以填充空白，将其转换为我在上面发布的代码块。如果“方向”被“生态学”取代，那么除了“方向”的每个实例都将被“生态学”取代之外，它的风格也会相同。

另一个优点是我可以在代码中进行重大更改，而无需更改所有数据库表。

在我深入研究这个项目之前，我只是想知道是否有人可以告诉我这是一个可行的方案还是一个愚蠢的想法。有没有更好的方法呢？

Answer 1

继续存储HTML而不需要额外的标记。

<section>
    <h2>Directions</h2>
    <div>Some directions</div>
</section>
<section>
    <h2>Ecology</h2>
    <div>Ecology info</div>
</section>

您可以使用javascript / jQuery添加id，＃span，span和类，没有任何问题。尝试这样的事情（demo）：

$(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'
        });
    });
});

使用regex + str_replace为jQuery准备标记

1 个答案: