使用 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);
  });
});

显然，它不起作用。 （否则我为什么会在这里？）点击事件工作正常，因为我可以在 Firebug 中单步执行它。但是当开始设置该值时，代码失败了。更重要的是，尝试 alert(jQuery('div#toggleParent input#toggleValue').length) 返回 0。事实上， alert(jQuery('div#toggleParent h2').length) 返回 0，即使该元素上的单击事件刚刚触发！

我缺少什么？

Answer 1

这个：

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

应该是：

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

或者甚至：

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

或者...

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

请记住，使用 ID 时，不需要任何其他选择器，因为 ID 是唯一的。这就足够了：

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

Answer 2

您的“toggle”值未定义，您仅在 document.ready 中定义它，但不为其分配任何值。要分配，请使用

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

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

试试这个代码：

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