有没有办法在不同div的按下时更改另一个div的内容？ HTML、Flask、CSS、Python

Question

目前，我正在开发一个记事本应用程序，但不知道如何让新记事出现在右对齐的 div 上。左侧的 div 列表包含不同的注释，按下按钮时，该注释的标题和正文应出现在右侧的 div 中。

目前的做法：

HOME.HTML

<div class="notes" id="app">
        <div class="notes__sidebar">
            <form action=/home method="post">
                <button type="submit" class="notes__add" onclick=show() type="submit">New Note</button>
            </form>
            <!-- TODO: Complete form for new note view after clicking on a note. -->
            <form action=/home/noteview method="post">
                <div class="notes__list" onclick=show() type="submit">
                    {% for note in notes %}
                    <div class="notes__list-item">
                        <div class="notes__small-title" name="note_title">{{note.title}}</div>
                        <div class="notes__small-body" name="note_body" style="display: none">{{note.body}}</div>
                        <div class="notes__small-body">{{note.body | truncate(20, true,'...',0)}}</div>
                        <div class="notes__small-updated">Last Edited Friday 1:35pm</div>
                    </div>
                    {% endfor %}
                </div>
            </form>
        </div>
        <div class="notes__preview" style="display: visible;">
            <form action=/home method="post">
                <input name="note_title" class="notes__title" type="text" placeholder="Enter a title...">
                <textarea name="note_body" class="notes__body" placeholder="I am the note's body..."></textarea>
                <script type="text/javascript">
                    textarea = document.querySelector(".notes__body");
                    textarea.addEventListener('input', autoResize, false);

                    function autoResize() {
                        this.style.height = 'auto';
                        this.style.height = this.scrollHeight + 'px';
                    }
                </script>
                <button type="submit" class="notes__save">Save Note</button>
            </form>
        </div>

        <div class="notes__view" style="display: none;">
            <input name="note_title" class="notes__title" type="text" placeholder="Enter a title..."
                value="{{selected_note.title}}">
            <textarea name="note_body" class="notes__body"
                placeholder="I am the note's body...">{{selected_note.body}}</textarea>
        </div>

        <script>
            function show() {
                let notes__preview = document.querySelector(".notes__preview");
                let notes__view = document.querySelector(".notes__view");

                if (notes__preview.style.display == "block") {
                    notes__preview.style.display = "none";
                    notes__view.style.display = "block";
                }
                else {
                    notes__preview.style.display = "block";
                    notes__view.style.display = "none";
                }
            }
        </script>
    </div>

APP.PY

@flask_obj.route('/home', methods=['GET', 'POST'])
def home():
    notes = Note.query.all()
    data = request.form

    if request.method == 'POST':
        title = request.form['note_title']
        body = request.form['note_body']

        new_note = Note(title=title, body=body, user_id = 1) # placeholder id
        db.session.add(new_note)
        db.session.commit()

        notes = Note.query.all()

    # TODO: Modify note view when existing note is clicked
        
    return render_template('home.html', **locals())

@flask_obj.route("/home/noteview", methods=['GET', 'POST'])
def viewnote():
    selected_note=Note.query.all()
    data = request.form

    if request.method == 'POST':
        title = request.form['note_title']
        body = request.form['note_body']

        selected_note = Note.query.filter_by(body=body).all() # temporary, fix later

    return render_template('home.html', title=title, body=body, selected_note=selected_note)

我尝试了这个，但是selected_note无法通过html中的notes__view访问。我缺少一个选项吗？或者是否有更有效的方法来实现这一目标？

Answer 1

是的 为了实现您所描述的功能，您可能需要结合使用 HTML、CSS 和 JavaScript。这是一个帮助您入门的简单示例：

此示例由两个面板组成：左侧面板用于显示笔记列表，右侧面板用于显示所选笔记。注释是用 JavaScript 动态创建的，并附加到左侧面板。当您单击笔记时，其标题和正文将显示在右侧面板上。

您可以根据您对笔记应用程序的具体要求来调整和扩展此示例。