Question

我的网站上有一个表单，允许人们创建包含章节的文档，每个章节都包含步骤。基本上，问题是我可以很好地创建Sections，但是由于某种原因没有创建Steps。

每个部分和每个步骤的HTML都是使用下划线模板创建的，您可以在以下两个脚本中看到：

<script id="tmpl-section" type="text/html">

    <div class="section">
        <div class="form-group row">
            // inputs
        </div>

        <div class="form-group row">
            // more inputs
        </div>

        <a href="#" onclick="addSection($(this), true)">
            Add section after 
        </a>

        <a href="#" onclick="addSection($(this), false)">
            Add section before
        </a>

        <h5>Steps</h5>
        <div class="step-body"></div>

        <hr />
    </div>
</script>

<script id="tmpl-step" type="text/html">
    <div class="step">
        <div class="form-group row">
            // inputs
        </div>

        <div class="form-group row">
            // inputs
        </div>
    </div>
</script>

当有人点击“添加部分（之前或之后）”时，将调用以下函数：

function addSection(element, after) {
    var sectionStructure = _.template($('#tmpl-section').html()),
        $sectionBody = $('.section-body');

    if ($('.section').length) {
        if (after) {
            element.closest('.section').after(sectionStructure);
        } else {
            element.closest('.section').before(sectionStructure);
        }
    } else {
        $sectionBody.append(sectionStructure);
    }
    addStep($(this), true); // '$(this)' should refer to whichever "add section" link was clicked
}

（$sectionBody指的是包含所有部分的页面部分。）基本上，它会检查页面上是否有任何其他部分，以便首次加载页面时，如果有不是，它增加一个。如果还有其他部分，则在单击任何部分之前或之后添加另一部分。不是超级相关，但我想在那里解释if语句。

每次调用addSection（）时，它还会调用另一个名为addStep（）的函数来一步初始化每个新节。

function addStep(element, after) { 
    var stepStructure = _.template($('#tmpl-step').html()),
        $thisStepBody = element.siblings('.step-body');

    $thisStepBody.append(stepStructure);
}

最终我会在每个步骤中添加一个链接，以便像每个部分一样在之前/之后添加另一个步骤，但我还没有那么远。

问题是，$thisStepBody.append(stepStructure);没有做任何事情。我的猜测是$thisStepBody.siblings('.step-body')，它应该指向点击任何一个部分内的('.step-body')，这是问题所在。我尝试了很多不同的方法，我不知道它为什么不起作用。

这似乎应该是一件简单的事情，但我担心我正在尝试做的其余部分是如此过于复杂，以至于它以一种我甚至无法想到的方式搞乱。 / p>

Answer 1

addStep($(this), true);

应该是

addStep(element, true);

addSection()函数未绑定到单击的元素，该元素作为参数传递。

无法让.siblings（）在jQuery中工作

1 个答案: