-1
私はすでにスタックのオーバーフローに関する他の同様の質問を見てきました。 私はforloopを使って画像を表示するので、そのタグは私が割り当てたリストの変数であり、ユーザはいずれかを選択することができます。ユーザが1つを選択したときに、表示するボックスを切り替えるとしますが、このエラーが発生しています。 .htmlを使用してその内部のテキストを変更できるので、タグ割り当てが機能していないわけではありません。表示部分と連携していないものがあります。未定義（...）のプロパティ 'display'を読み取ることはできませんが、このタグ以外のタグの他の用途でも機能しますか？
このページの2番目のイメージには、仲裁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 %}
'style'はネイティブDOM要素の属性です - あなたは検索する必要がありますアクセスしようとする前にjQueryオブジェクトからDOM要素を削除してください。 – Serlite