Question

当我尝试在jfiddle中使用下面的代码时，我注释掉了jinja，按钮按预期隐藏，但在浏览器中，输入按钮不隐藏

{% extends "layout.html" %}
{% block body %}
<div>
  {% if session.logged_in %}
    <form action="{{ url_for('add_entry') }}" method=post class=add-entry>
      <dl>
        <dt>Stock Ticker:
        <dd><input type=text size=30 name=stockname>
        <dt>Date:
        <dd><input id="datePicker" type="date" name='start_date'>
        <dd><input type=submit value=Add>
      </dl>
    </form>
  {% endif %}
</div>
<div>
<form action="{{ url_for('edit_entry') }}" method=post class=edit-entry>
  <table class="entries">
    <tr>
    <th>stock ticker</th>
    <th>date bought</th>
    <th> Edit</th>
    </tr>
    {% for entry in entries %}
    <tr>
        <td><h2>{{ entry.stockname }}</h2></td>
        <td>{{ entry.start_date|safe }}</td>
        <td>
        <input type="hidden" name="name" value="Edit"/>
        <input class="show" type="button" id="edit-button" value="Edit"/>
        <input class="hide" type="button" id="cancel-button" value="Cancel Changes"/>
        <input class="hide" type="submit" id="save-button" value="Save Changes"/>
        </td>
     </tr>
    {% else %}
    <em>Unbelievable.  No entries here so far</em>
  {% endfor %}
</table>
</form>
</div>
{% endblock %}

<script>
$(document).ready( function() {
    var now = new Date();
    var day = ("0" + now.getDate()).slice(-2);
    var month = ("0" + (now.getMonth() + 1)).slice(-2);
    var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
    $('#datePicker').val(today);

    $(".hide").hide();
}); 
</script>

和layout.html包含......

<!doctype html>
<title>Flaskr</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
<div class=page>
  <h1>Flaskr</h1>
  <div class=metanav>
  {% if not session.logged_in %}
    <a href="{{ url_for('login') }}">log in</a>
  {% else %}
    <a href="{{ url_for('logout') }}">log out</a>
  {% endif %}
  </div>
  {% for message in get_flashed_messages() %}
    <div class=flash>{{ message }}</div>
  {% endfor %}
  {% block body %}{% endblock %}
</div>

小提琴：http://jsfiddle.net/5ZNTf/

Answer 1

你定义了很多

<input type="submit" id="save-button" value="Save Changes"/>

在你的for循环中

，所以你在页面上有多个具有相同id的输入标签，因此它不起作用。尝试给输入一个类。

Answer 2

使用class而不是id作为输入元素。

<input type="hidden" class="name" value="Edit"/>
<input type="button" class="edit-button" value="Edit"/>
<input type="button" class="hide" value="Cancel Changes"/>
<input type="submit" class="hide" value="Save Changes"/>

将选择器更改为使用类。

$("input[class=hide]").hide();

试试这个：http://jsfiddle.net/5ZNTf/1/

Answer 3

我需要独一无二。如果要隐藏多个具有相同名称的元素，请使用类。

<button class="hide">Cancel</button>
<button class="hide">Save</button>

然后添加一个css类来隐藏它们。这是更可靠的IMO。

.hide {
    display: none;
}

Answer 4

该问题与jhost -_-

中的localhost而非属性读取有关

“// url”而不是“http：//”或“https：//”只能远程工作

JQuery没有准备好隐藏按钮

4 个答案: