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

ProgramBox

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

Post author:admin
Запись опубликована:25 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #hidden-field

#javascript #jquery #HTML #скрытое поле

Вопрос:

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

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 для этого точного элемента только что сработало!

Чего я не понимаю?

1. Все любопытнее и любопытнее. Только что попробовал этот код в jsFiddle, и разве вы этого не знали? Это работает отлично. Очевидно, что есть проблема в другом месте, которую я не вижу. В любом случае, спасибо, что взглянули на это!

Ответ №1:

Это:

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

Должно быть:

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

Или даже:

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

Или…

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

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

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

1. @Box9 Или даже: jQuery(function($) { ... }); (поскольку $ это круче, чем jQuery )

2. На самом деле я считаю, что для повышения производительности лучше использовать селектор идентификаторов.

3. Ничто из этого на самом деле не решает проблему, связанную с тем, что код работает, ЗА ИСКЛЮЧЕНИЕМ строки, которая ссылается на .val. Код, который я использую, на самом деле использует jQuery(document). готово — я просто неправильно скопировал его.

4. @Roger, из того, что мы видим, нет причин, по которым это не сработает. Можете ли вы настроить демонстрацию проблемы, которая действительно возникает?

5. Все любопытнее и любопытнее. Только что попробовал этот код в jsFiddle, и разве вы этого не знали? Это работает отлично. Очевидно, что есть проблема в другом месте, которую я не вижу. В любом случае, спасибо, что взглянули на это!

Ответ №2:

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

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

1. Значение undefined не является проблемой; оно просто перемещается в блок else инструкции if. Я пошагово проработал код, и он не завершается с ошибкой до тех пор, пока не будет выполнено присвоение значения val, после чего toggle ДЕЙСТВИТЕЛЬНО получит значение. Кроме того, это не решает проблему, связанную с тем, что предупреждения о длине постоянно возвращают 0.

Ответ №3:

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

 jQuery(function($) {

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

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

});

1. Это также не удается. $('#toggleParent').length возвращает 0, поэтому, когда я пытаюсь ввести [0] в это, я получаю сообщение об ошибке.

2. @Roger Если $('#toggleParent').length возвращает 0, то на странице нет элемента с идентификатором «toggleParent». Вы пробовали в разных браузерах?

Ответ №4:

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

 $(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
            });
        });