JQuery не скрывает кнопки наготове

Question

JQuery не скрывает кнопки наготове

0

Когда я пытаюсь использовать приведенный ниже код с 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/

Fridiculous 29 нояб. 2013, в 20:30

Источник

0

Покажи скрипку. Также лучше всего скрывать элементы DOM с помощью CSS.
David Aguirre 29 нояб. 2013, в 19:11
0

добавить скрипку, и показал это с помощью классов
Fridiculous 29 нояб. 2013, в 19:32
0

Мой ответ обновлен с помощью скрипки
Purus 29 нояб. 2013, в 19:34

Показать ещё 1 комментарий

Теги:

javascript

jquery

jinja2

4 ответа

Ещё вопросы

Покажи скрипку. Также лучше всего скрывать элементы DOM с помощью CSS.
добавить скрипку, и показал это с помощью классов
Мой ответ обновлен с помощью скрипки

Purus · Answer 1 · 2013-11-29T18-19-00.000Z

Используйте класс вместо 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/

это работает в скрипке / но не в браузере: /
это работает в скрипке, но не в моем браузере. Это что-то еще, что-то слишком очевидное.

bagonyi · Answer 2 · 2013-11-29T16-55-00.000Z

Вы определяете множество

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

в вашем цикле for, так что у вас есть несколько входных тегов с одним и тем же идентификатором на странице, поэтому он не работает. Попробуйте дать входы классу вместо этого.

то, что происходит с идентификаторами в скрипке, скрывает только одна из кнопок, но в браузере ничего не скрывается.

Fridiculous · Answer 3 · 2013-11-29T19-41-00.000Z

Проблема связана с чтением свойств localhost, а не с jquery -_-

"//url" вместо "http://" или "https://" работает только удаленно

David Aguirre · Answer 4 · 2013-11-29T17-29-00.000Z

Идентификатор должен быть уникальным. Если вы хотите скрыть несколько элементов с тем же именем, используйте класс.

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

Затем добавьте класс css, чтобы скрыть их. Это более надежная ИМО.

.hide {
    display: none;
}

Я думаю, что проблема связана с выбором DOM / JQuery, а не просто найти способ скрыть это. Я пытаюсь этот контрольный пример как средство для отладки большего количества jquery.
Кроме того, я пытался, и это не сработало