javascript - 无法读取undefined(…)的属性“display”，但它可以用于标签的其他用途而不仅仅是此用途？

Question

This question already has answers here:

How to get a DOM Element from a JQuery Selector
                                
                                    （4个答案）
                                
                        
                                3年前关闭。
            
                    
我已经看过堆栈溢出的其他类似问题。
我使用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 %}

最佳答案

@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（）方法仅切换元素的可见性：

关于javascript - 无法读取undefined(…)的属性“display”，但它可以用于标签的其他用途而不仅仅是此用途？ ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40771390/

上一篇：javascript - php login 将密码存储在 txt 中

下一篇：html - 如何让td内容填满整个parent？

Answer 1

@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（）方法仅切换元素的可见性：