Question

我正在使用以下库：https://github.com/hyperhype/hyperscript

以下代码：

h('input', { list: "list-id"}),
h('datalist', { id: "list-id" }, [
    h('option', ["Option 1"]),
])`

导致：

<input>
<datalist id="list-id">
    <option>Option 1</option>
</datalist>

input元素缺少list属性，即看起来像<input list="list-id">

我在做什么错？

Answer 1

我设法用以下方法解决它：

{% extends "main/base.html" %}
{% load static %}
{% load humanize %}
{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static 'main/css/title_posts.css' %}">
{% endblock styles %}

{% block content %}
    <style>
        body {
            background-image: url("{{ game.cover_display.url }}");
            background-repeat: no-repeat;
            background-size: 100% auto;
            background-color: #171717;
            background-attachment: fixed;
            background-position: 0 3.5rem;
        }
    </style>
    <div class="container black2 container-nav gamenav">
        <ul class="quantico">
            <li><a class="text-light nav-link" href="{% url 'title-posts' game.title %}">Updates</a></li>
            <li><a class="text-light nav-link" href="{% url 'title-bugs' game.title %}">Bugs</a></li>
            <li><a class="text-light nav-link" href="https://twitter.com/{{ game.twitter }}">Twitter</a></li>
            <li><a class="text-light nav-link" href="https://www.reddit.com/r/{{ game.reddit }}">Reddit</a></li>
        </ul>
    </div>
    <div class="container black container-position">
        <div class="row justify-content-center">
            <div class="col-md-3 text-center">
                <img class="cover-image-height" src="{{ game.cover.url }}">
            </div>
            <div class="col-md-9">
                <p>{{ game.description| safe }}</p>
                <div class="btn-group">
                    <button type="button" id="platform" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                        Select Platform
                    </button>
                    <div class="dropdown-menu" id="plat-form-options">
                        {% for platform in game.platform.all %}
                            <option class="dropdown-item" value="{{ platform.id }}"
                                    onclick="platFormSelect('{% url 'title-posts-ajax' title=game.title platform_id=platform.id %}', '{{ platform }}')">{{ platform }}</option>
                        {% endfor %}
                    </div>
                </div>


            </div>
        </div>
        <hr>
        <div id="posts_data">
        </div>
        {% if is_paginated %}

            {% if page_obj.has_previous %}
                <a class="btn btn-outline-info mb-4" href="?page=1">First</a>
                <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.previous_page_number }}">Previous</a>
            {% endif %}

            {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                    <a class="btn btn-info mb-4" href="?page={{ num }}">{{ num }}</a>
                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                    <a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
                {% endif %}
            {% endfor %}

            {% if page_obj.has_next %}
                <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.next_page_number }}">Next</a>
                <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
            {% endif %}

        {% endif %}
    </div>



    <script>


        $(document).ready(function () {
            if ($("#plat-form-options option").length > 0) {
                $("#plat-form-options option")[0].click();
            }

        });


        function platFormSelect(url, platform) {
            $('#platform').text(platform);


            $.get(url, function (response) {
                        $('#posts_data').html(response);

                    })
                    .done(function () {

                    })
                    .fail(function () {

                    });

        }


    </script>
{% endblock content %}

输入数据列表在超级脚本中不起作用

1 个答案: