Question

我已经看过堆栈溢出的其他类似问题了。我使用forloop显示图像，因此它们的标签是我指定的列表中的变量，并允许用户选择任何一个。当用户选择一个时，我想切换一个框来显示，但是我收到了这个错误。这不是我的标签分配不起作用，因为我可以使用.html更改其中的文本，这是因为显示部分无法正常工作。

这与页面上的第二个图像具有任意ID并且无法通过HTML访问的事实无关。这是为了测试单击（$ id）时同一类的两个缩略图都不受影响，这是真的。我在第一行收到错误：

                if ($(id).style.display === 'none') /* but this doesn't work */

也许我错过了显示属性的导入或某些东西......？样式页面不会标记包含显示设置的任何错误。我正在拍摄的那些标签中的所有内容都不是隐藏的而不是红色的，这使我认为标签不起作用，因为无法找到元素。

var food = {};

$(document).ready( function() {

    
    if ( location.pathname == ( "/city" ) || location.pathname == ( "/food" ))        
    {
        

        $.getJSON(Flask.url_for("rank"), function (item, x, y ) {
                console.log(item[0])
                console.log(item[0]["food"]);
                console.log(item[0]["abbrev"]);
                food['name'] = item[0]["food"]
                food['city'] = item[0]["name"]
                food['num_destinations']= item[0]["num_destinations"]
                food['id']=item[0]["id"]
            });
        
        $(".thumb").bind('click', function () {
            
                console.log("this is an " + food['name']);
                var id = "#"+ food['id'];
                console.log(id);
                $(id).html('THIS WORKED') /*and this does indeed work */
                if ($(id).style.display === 'none') /* but this doesn't */
                {
                console.log("making visible")
                $(id).style.display = 'block';
                }
                else
                {
                    console.log("making hidden")
                    $(id).style.display = 'none';
                }
        

            });

            
      
    }
    
    
    });

.ranking
{

}
/* tags for each item in city page */
#1, #2, #3, #4, #6, #7, #9, #10, #11, #12, #13, #14{
    background-color : red;
    display : 'none';
}

{% extends "layout.html" %}

{% block title %}
    {{ item[0]['food'] }}
{% endblock %}

{% block main %}
    <h2>{{ item[0]['food'] }}</h2>
    <div class= container-fluid >
    <div id = "city">
        <div class = "row">
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <div id = {{ item[0]["food"] }} class="thumbnail" >
                    <img class="img-responsive" src= "{{ url_for("static", filename = CITY_LIST[0]['background_filename']) }}" alt="">
                    <h4 class = caption > {{ item[0]['food'] }} </h4>
                </div>
                <div class = "ranking" id = {{ item[0]["id"]}} > ID: {{ item[0]["id"]}}  </div>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <div id = {{ item[0]["food"] }} class="thumbnail" >
                    <img class="img-responsive" src= "{{ url_for("static", filename = CITY_LIST[0]['background_filename']) }}" alt="">
                    <h4 class = caption > {{ item[0]['food'] }} </h4>
                </div>
                <div class = "ranking" id = 4 > ID: this is for testing  </div>
            </div>
        </div>
    </div>
    </div>
    
           
{% endblock %}

Answer 1

您已将id包装在jQuery中，而jQuery没有style属性，它是

$(id).css('display') === 'none'

甚至

$(id).is(':visible')

或

$(id).get(0).style.display === 'none'

Answer 2

@adeneo回答是你的代码无法运作的原因。实际上你可以替换你的代码块：

if ($(id).style.display === 'none') /* but this doesn't */
{
    console.log("making visible")
    $(id).style.display = 'block';
}
else
{
    console.log("making hidden")
    $(id).style.display = 'none';
}

通过

$(id).toggle();

.toggle()

没有参数，.toggle（）方法只是切换元素的可见性：

无法读取undefined（...）的属性'display'，但它是否适用于标签的其他用途而不是这个？

2 个答案: