在 if-else 条件下，额外的 div 被添加到 html 标记中

Question

if else html 标记中会添加额外的 div；当第二个块未执行时。基于作者对话框中的复选框，存在三个条件。当第二个复选框未被选中时；那么第一个和第三个条件为真，第二个条件为假；所以第二个 sightly 块不应该被执行。但是它在标记中添加了额外的 div ；这样 div 和 class "container tabs-container" 在两者之间关闭。

-- 请在视觉标记下方找到

<sly data-sly-test.condition1="${properties.checkbox1}">
<sly data-sly-test.condition2="${properties.checkbox2}">
<sly data-sly-test.condition3="${properties.checkbox3}">

<div class="tabs-body">
            <div class="container tabs-container">

                <!--/* First condition */-->
                <sly data-sly-test="${condition1}">
                    <div class="tabs-body-item" data-tab-content-id="data-tab-content-id1">

                    </div>
                </sly>                

                <!--/* Second condition */-->
                <sly data-sly-test="${condition2}">
                    <sly data-sly-test="${condition1}">
                    <div class="tabs-body-item" data-tab-content-id="data-tab-content-id2">
                    </sly>
                    <sly data-sly-test="${!condition1}">
                    <div class="tabs-body-item is-active" data-tab-content-id="data-tab-content-id2">
                    </sly>
                    </div>
                </sly>

                <!--/* Third condition */-->
                <sly data-sly-test="${condition3}">
                    <sly data-sly-test.condition2andcondition1false="${!condition2 && !condition1}">
                        <div class="tabs-body-item is-active" data-tab-content-id="data-tab-content-id3">
                    </sly>
                    <sly data-sly-test="${!condition2andcondition1false}">
                        <div class="tabs-body-item" data-tab-content-id="data-tab-content-id3">
                    </sly>
                    </div>
                </sly>


            </div> 
        </div>

呈现的标记是--

<div class="tabs-body">
            <div class="container tabs-container">


                    <div class="tabs-body-item" data-tab-content-id="data-tab-content-id1">

                    </div>


                </div><!--extra div-->





                        <div class="tabs-body-item" data-tab-content-id="data-tab-content-id3">

                    </div>


            </div> 
        </div>

额外的 div 已在评论中提及。我花了很多时间在上面，但无法弄清楚从哪里添加额外的 div 。各位高手能帮我解决一下吗？

欣赏。

Answer 1

这很可能是由于标签嵌套无效。不要尝试将 JSTL 代码原样转换为 HTL。

<div class="tabs-body">
    <div class="container tabs-container">

        <!--/* First condition */-->
        <div class="tabs-body-item" data-tab-content-id="data-tab-content-id1" 
            data-sly-test.condition1="${properties.checkbox1}">

        </div>

        <!--/* Second condition */-->
        <div class="tabs-body-item ${ condition1 ? '' : 'is-active' }" 
            data-tab-content-id="data-tab-content-id2" 
            data-sly-test.condition2="${properties.checkbox2}">

        </div>

        <!--/* Third condition */-->
        <div class="tabs-body-item ${condition1 && condition2 ? 'is-active' : ''}" 
            data-tab-content-id="data-tab-content-id3" 
            data-sly-test="${properties.checkbox3}">

        </div>

    </div> 
</div>

在 if-else 条件下，额外的 div 被添加到 html 标记中

Extra div getting added in sightly html markup in if-else condition

html

templating

aem

sightly