点击

Question

我想在点击时更改DOM。这是我的Liquid（google.md）：

---
layout: pastTournaments
title: Google Tournament
permalink: /tournaments/google/
---

<h5 class="column-wrapper centered">These are the rankings for the Google Qualifying tournament, which was hosted on December 2, 2017.</h5>
<br>
<div class="column-wrapper">
    <div class="grid-x">
        <div class="large-6 shrink cell">
            <table>
                <thead>
                    <tr>
                    <th width="20" class="centered">Rank</th>
                    <th width="150" class="centered">Team Number</th>
                    <th width="150" class="centered">Team</th>
                    <th width="50" class="centered">QP</th>
                    <th width="50" class="centered">RP</th>
                    <th width="50" class="centered">Plays</th>
                    </tr>
                </thead>
                <tbody>
                    {% assign sorted = site.data.google.teams | sort:"rank" %}
                    {% for team in sorted %}
                        <tr class="table" onclick="ranks()">
                            <td class="centered">{{ team.rank }}</td>
                            <td class="centered">{{ team.number }}</td>
                            <td class="centered">{{ team.name }}</td>
                            <td class="centered">{{ team.qp }}</td>
                            <td class="centered">{{ team.rp }}</td>
                            <td class="centered">{{ team.plays }}</td>
                        </tr>
                    {% endfor%}
                </tbody>
            </table>
        </div>
        {% for team in site.data.google.teams %}
        <!--I want to remove this if tag because it is specific to one team-->
            {% if team.name == 'Q' %}
                <!--I want to move this line -->
                <div class="large-6 shrink cell">
                    <h2 class="centered"><strong>{{ team.number }} {{ team.name }}</strong></h2>
                    <h4 class="centered"><strong>Rank: </strong>#{{ team.rank }}</h4>
                    <p class="centered"><strong>QP: </strong>{{ team.qp }}</p>
                    <p class="centered"><strong>RP: </strong>{{ team.rp }}</p>
                    <p class="centered"><strong>Plays: </strong>{{ team.plays }}</p>
                    <div id="ranks-right"></div>
                <!--To this line -->
                </div>
            {% endif %}
        {% endfor %}

    </div>
</div>

我需要它，以便将{{team.name}}设置为点击的团队。

Answer 1

您想要在点击上设置Jekyll变量。这是不可能的。你还没有完全理解Jekyll的工作方式。你几乎就在那里......但是你缺少的是变量只在构建期间设置。如果你想在DOM中的某些东西在点击上改变，你将不得不使用javascript。液体无法帮助你。遗憾。