Поиск скрытого поля с помощью JQuery

Question

Сведенный до самого низкого элемента, я просто хочу установить значение скрытого поля, когда нажимаю на элемент на странице.

HTML:

<div id="toggleParent">
  <input type="hidden" name="toggleValue" id="toggleValue" value="closed" />
  <h2>Click Me</h2>
</div>

JQuery:

jQuery(document).ready(function() {
  var toggle;
  jQuery('div#toggleParent h2').click(function () {
    if (toggle == '' || toggle == 'open') {
      toggle = 'closed';
    } else {
      toggle = 'open';
    }
    jQuery('div#toggleParent input#toggleValue').val(toggle);
  });
});

Очевидно, это не работает. (Зачем мне быть здесь в противном случае?) Событие click работает нормально, так как я могу пройти через него в Firebug. Но когда дело доходит до установки значения, код завершается ошибкой. Более того, попытка alert(jQuery('div#toggleParent input#toggleValue').length) возвращает 0. На самом деле, alert(jQuery('div#toggleParent h2').length) возвращает 0, даже если событие click для этого точного элемента только что сработало!

Чего мне не хватает?

Answer 1

Это:

document.ready(function () {...});

Должно быть:

jQuery(document).ready(function () {...});

Или даже:

jQuery(function () {...});

Или ...

jQuery(function ($) { /* Use $ in here instead of jQuery */ });

Имейте в виду, что при использовании идентификаторов любой другой селектор не нужен, поскольку идентификаторы уникальны. Этого достаточно:

jQuery('#toggleValue').val(toggle);

Answer 2

Попробуйте этот код:

$(document).ready(function() {
            var toggle;
            $('div#toggleParent h2').click(function() {
                if (toggle == '' || toggle == 'open') {
                    toggle = 'closed';
                } else {
                    toggle = 'open';
                }
                $('div#toggleParent input#toggleValue').val(toggle);
                alert($("input#toggleValue").val()); // check what the new value is
            });
        });

Answer 3

Я предлагаю этот код:

jQuery(function($) {

    var toggleParent = $('#toggleParent')[0],
        toggleValue = $('#toggleValue')[0];

    $(toggleParent).find('h2').click(function() {
        toggleValue.value = toggleValue.value === 'closed' ? 'open' : 'closed';
    });

});

Answer 4

Ваше значение 'toggle' не определено, вы определяете его только в document.ready, но не присваиваете ему никакого значения.Чтобы назначить, используйте

var toggle = jQuery('div#toggleParent input#toggleValue').val();