Question

我正在尝试通过每行中记录的房间名称来过滤表。我的表格行看起来像这样：

 <tr data-room="{{ record.room.room_name|lower|field_name_format}}">

因此，当用户检查厨房时，表中将显示与厨房相关的行，而不是与其他房间相关的行。

这是我的HTML标头中的代码：

{% for room in user_related_rooms %}
    document.querySelector('#{{room.room_name|lower|field_name_format}}').addEventListener('change',function (evt) {
    updateTableView("{{room.room_name|lower|field_name_format}}", evt.target.checked);
  });
{% endfor %}


function updateTableView(room_name, bVisible) {
    var dataSelectorVal = "";
    switch (room_name) 
    {
        {% for room in user_related_rooms %}
            case "{{room.room_name|lower|field_name_format}}":
            dataSelectorVal = ".site-table tbody tr[data-room='{{room.room_name|lower|field_name_format}}']";
            break;

          {% endfor %}
    }
    $(".site-table tbody tr").has(dataSelectorVal).css('display', bVisible ? "" : "none");
}

以下是过滤器的代码：

 <!-- Filters -->
    <div class="col-md-1">
        <h1>Filters</h1>
        <form>
            <span> by room:</span>
            <div  class="side-filter-list">
                <ul>
                {% for room in user_related_rooms %}
                    <li class="flex-field">

                        <input type="checkbox" id="cb_{{room.room_name|lower|field_name_format}}" />
                        <label for="{{room.room_name}}">{{room.room_name}}</label>
                    </li>
                {% endfor %}
                </ul>
            </div>
        </form>
    </div>

浏览器在出现异常时暂停。我在这条线上出现错误，Living_room是循环中的第一个房间（即循环的第一个迭代）：

document.querySelector( '#cb_living_room' ).addEventListener('change', function (evt) {

似乎上面的行返回null，而当我注释掉代码并使用控制台查找它时，它发现它却没有任何抱怨：

document.querySelector( '#cb_living_room')

控制台给我输出：

<input id="cb_living_room" type="checkbox">

我在做什么错？发生了什么事？

Django和JavaScript：过滤在异常中不起作用

0 个答案: