我一直在玩弄Jquery和PHP，我正试图为一支运动队建立一个网站。我创建了一个名为“匹配”的自定义帖子类型，并在其中创建了两个自定义元框。一个用于比赛细节（即主客场）和一个用于比赛统计（进球、投篮等）。我目前拥有的是一个（这个游戏完成了吗）复选框，它在元框详细信息（#dw\\u match\\u Details）中显示/隐藏统计选项（位于Div#meta\\u box\\u stats中）。
复选框数据值正在保存，但功能不太正常。如果在加载后将其选中为完成编辑，并且该值设置为“开”，那么当我尝试编辑帖子时，它仍然不会显示统计数据元框，我必须先将其关闭，然后再将其打开。这是我的代码（尽可能简短，因为有很多事情要做）。
这是可行的，因为我已经完成了var\\u dump on检查，它会相应地更改为on或off，并显示检查或不显示。
我想先隐藏统计数据，直到输入游戏分数。一旦输入并检查为完整，在编辑页面时应始终显示。。。我就是不明白为什么不是这样。
这是我的剧本
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#dw_match_stats").hide();
$(\'#dw_match_details\').on(\'change\', \'#dw_complete\', function() {
played = $(this).prop(\'checked\');
if (played) {
$(\'#dw_match_stats\').show();
} else {
$(\'#dw_match_stats\').hide();
}
});
$(\'#dw_match_stats\').change();
});
</script>
如上所述，自定义数据值“dw\\u complete”正在正确保存和更改。
编辑：下面是一些剩余的代码。我基本上创建了两个元框，一个称为#dw\\u match\\u details，其中包含球队选择和游戏是否完成的复选框。
<div id="dw_match_details" class="postbox ">
<div class="handlediv" title="Click to toggle"><br></div><h3 class="hndle"><span>Match Details</span></h3>
<div class="inside">
<?php
$values = get_post_custom( $post->ID );
$check = $values[\'dw_complete\'][0];
?>
<input type="checkbox" id="dw_complete" name="dw_complete" <?php checked( $check, \'on\', true ); ?> />
<label for="dw_complete">Is This Game Complete?</label>
然后我有了我的统计元数据库。
<div id="dw_match_display" class="postbox">
<div class="inside">
<div id="dw_game_stats" class="tabs-panel">
<div width="50%" style="float:left;margin-right:10%;">
<strong>Goals Per Period:</strong>
<table>
<thead>
<tr>
<th> </th>
<th>1st</th>
<th>2nd</th>
<th>3rd</th>
<th>OT</th>
<th>Total</th>
</tr>
</thead>
</table>
</div>
这就是要点，我显然有更多关于统计部分的信息，但我认为这应该是无关紧要的。如果你需要我张贴，我可以或我可以把它放在一个粘贴箱。在我忘记之前，这里有两个调用来创建我的元框。
function dw_custom_meta_boxes_match() {
add_meta_box( \'dw_match_details\', \'Match Details\', \'dw_match_details\', \'dw_match\', \'normal\', \'high\' );
add_meta_box(\'dw_match_display\', \'Match Statistics\', \'dw_match_display\', \'dw_match\', \'normal\', \'low\' );
SO网友:Charles Clarkson
我通过删除WordPress的内容和一些标记简化了您的代码。我发现它仍然没有运行change 事件，直到我这样做：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Testing jQuery</title>
<script type=\'text/javascript\' src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$( \'#dw_match_display\' ).on( \'change\', \'#dw_complete\', function() {
$( \'#dw_match_details\' ).hide();
// These 2 lines should be removed in production.
var change_status = $(this).prop(\'checked\') ? \'shown\' : \'hidden\';
alert( "In Change Event\\n\\n Match Display will be " + change_status + \'.\' );
if ( $(this).prop(\'checked\') ) {
$( \'#dw_match_details\' ).show();
}
});
});
jQuery(document).ready(function($) {
$( \'#dw_complete\' ).change();
});
</script>
</head>
<body>
<div id="dw_match_display" class="postbox ">
<input type="checkbox" id="dw_complete" name="dw_complete" checked="checked" />
<label for="dw_complete"> Show Match Details</label>
<div id="dw_match_details" class="postbox">
[This data should be seen when the page loads.]
</div><!-- end #dw_match_details -->
</div><!-- end #dw_match_display -->
</body>
</html>
我添加了一个警报框，以便您可以看到
change 事件在页面加载时运行。我不知道为什么第二次打电话给
jQuery(document).ready 作品我只是在百灵鸟身上试过。：）
选中该复选框后，将测试页面。若要在未选中该框时检查页面，请更改此行：
<input type="checkbox" id="dw_complete" name="dw_complete" checked="checked" />
对此：
<input type="checkbox" id="dw_complete" name="dw_complete" />
因此，请尝试将jQuery代码更改为：
jQuery(document).ready(function($) {
$(\'#dw_match_details\').on(\'change\', \'#dw_complete\', function() {
played = $(this).prop(\'checked\');
if (played) {
$(\'#dw_match_stats\').show();
} else {
$(\'#dw_match_stats\').hide();
}
});
});
jQuery(document).ready(function($) {
$(\'#dw_match_stats\').change();
});
