通过jQuery复选框显示Meta Box

时间：2013-07-19 作者：Phrosty30

我一直在玩弄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>&nbsp;</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\' );

2 个回复
最合适的回答,由SO网友:Phrosty30 整理而成

找到了一个解决方案，很简单

<script type="text/javascript">

jQuery(document).ready(function($) {
    var dw_match_display = $(\'#dw_match_display\');
    dw_match_display.hide();
    if ($(\'#dw_complete\').prop(\'checked\') ) {
        dw_match_display.show();
    }

    $( \'#dw_match_details\' ).on( \'change\', \'#dw_complete\', function() {
        dw_match_display.hide();
            if ( $(this).prop(\'checked\') ) {
                dw_match_display.show();
            } 
        });
    });
jQuery(document).ready(function($) {
    $( \'#dw_match_display\' ).change();
});

</script>

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

结束
标签： customization   jquery   metabox   小码农  

相关推荐

如何根据$wp_Query中的metabox值更改标记

我有一个称为“问题”的自定义帖子类型，每个问题都有一个内容页。我用发行号标记我的所有文章，因此，例如，所有发行15的文章都被标记\'issue-15\'.我有一个内容的自定义帖子模板，我使用以下代码调用同一问题编号内的所有问题帖子。$wp_query = new WP_Query( array( \'post_type\' => \'issue\', \'tag\' => \'issue-14\', \'posts_per_page\' =&g