Question

在jekyll中，这有效：

---
layout: default
---
    <div class="brief">
        <ul>
            {% for post in site.posts %}
                <li class="postlist">
                    <a href="#" onclick='document.getElementById("one").innerHTML="{{post.url}}";'>{{post.title}}</a>
                    <p>{{post.meta}} <br>{{post.date}} <br>{{post.category}}</p>                
                </li>
            {% endfor %}
        </ul>
    </div>
    <div class="post" id="one"></div>

但是当我将第8行更改为：

时

<a href="#" onclick='document.getElementById("one").innerHTML="{{post.content}}";'>{{post.title}}</a>

它打破了。为什么会发生这种情况，我该怎么做才能改变这种状态并获得理想的结果呢？

Answer 1

您的帖子内容可能会创建无效的HTML（例如，结束onclick引号）。

在我看来，实现这一目标的更好方法是隐藏所有帖子内容，让你的onclick切换一个类来显示相关内容。这样可以避免因通过属性值编码和解码内容而产生的无数恐怖。

例如：

{% for post in site.posts %}
  <li>
    <a href="#" onclick='document.getElementById("post-content-{{ forloop.index }}").classList.toggle("hidden")'>{{ post.title }}</a>

    <p>{{ post.meta }} <br>{{ post.date }} <br>{{ post.category }}</p>
    <p id="post-content-{{ forloop.index }}" class="hidden">{{ post.content }}</p>
  </li>
{% endfor %}

外部CSS：

.hidden {
  display: none;
}

您也可以将其扩展为首先隐藏所有内容部分，因此一次只显示一个。

将jekyll标签放入“onclick”休息时间

1 个答案: