Question

归结为barest元素，我只想在单击页面上的元素时设置隐藏字段的值。

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，即使该确切元素上的click事件刚刚被触发！

我错过了什么？

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

您的'切换'值未定义，您只在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
            });
        });

使用JQuery定位隐藏字段

4 个答案: