同一页上的点击过滤复选框

时间：2018-04-22 作者：Ante Medic

目前，我正在使用GET方法进行此操作。我想我把事情弄得太复杂了。在页面加载时，选中所有复选框，当用户取消选中复选框时，将筛选出具有该分类法的帖子。我的代码当前正在运行，如下所示：

选中设置复选框：

    $actual_link = "https://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";      
    if ( $actual_link == \'https://www.example.com/\') {
        $var_check = 1;
    }
复选框：

    <form action="<?php echo get_permalink() ?>" method="GET" id="filter">      
        <input type=\'hidden\' value=\'0\' name=\'f\'>
        <input type="checkbox" name="f" value="1" onchange="this.form.submit()" <?php if ( ($face ==\'1\') || ($var_check == 1) ) {echo \'checked\';}?>> <div class="sprite facebook" style="margin-left:5px;"> <span class="tooltiptext">Filter by Facebook</span></div><br>
        <input type=\'hidden\' value=\'0\' name=\'t\'>
        <input type="checkbox" name="t" value="1" onchange="this.form.submit()" <?php if ( ($twitter==\'1\') || ($var_check == 1) ) {echo \'checked\';}?>> <div class="sprite twitter2" style="margin-left:5px;"> <span class="tooltiptext">Filter by Twitter</span></div><br>
        <input type=\'hidden\' value=\'0\' name=\'te\'>
        <input type="checkbox" name="te" value="1" onchange="this.form.submit()" <?php if ( ($telegram==\'1\') || ($var_check == 1) ) {echo \'checked\';}?>> <div class="sprite telegram2" style="margin-left:5px;"><span class="tooltiptext">Filter by Telegram</span></div><br>   
        <input type=\'hidden\' value=\'0\' name=\'r\'>
        <input type="checkbox" name="r" value="1" onchange="this.form.submit()" <?php if ( ($reddit==\'1\') || ($var_check == 1) ) {echo \'checked\';}?>> <div class="sprite reddit" style="margin-left:5px;"> <span class="tooltiptext">Filter by Reddit</span></div><br>
        <input type=\'hidden\' value=\'0\' name=\'e\'>
        <input type="checkbox" name="e" value="1" onchange="this.form.submit()" <?php if ( ($email==\'1\') || ($var_check == 1) ) {echo \'checked\';}?>><div class="sprite email" style="margin-left:5px;"> <span class="tooltiptext">Flter by Email</span></div><br>
        <input type=\'hidden\' value=\'0\' name=\'ph\'>
        <input type="checkbox" name="ph" value="1" onchange="this.form.submit()" <?php if ( ($phone==\'1\') || ($var_check == 1) ) {echo \'checked\';}?>> <div class="sprite phone" style="margin-left:2px;"> <span class="tooltiptext">Filter by Phone</span></div><br>
        <input type=\'hidden\' value=\'0\' name=\'b\'>
        <input type="checkbox" name="b" value="1" onchange="this.form.submit()" <?php if ( ($bitcointalk==\'1\') || ($var_check == 1) ) {echo \'checked\';}?>> <div class="sprite bitcointalk" style="margin-left:3px;"> <span class="tooltiptext">Filter by BitcoinTalk</span></div><br>
        <input type=\'hidden\' value=\'0\' name=\'k\'>
        <input type="checkbox" name="k" value="1" onchange="this.form.submit()" <?php if ( ($kyc==\'1\') || ($var_check == 1) ) {echo \'checked\';}?>><div class="sprite kyc" style="margin-left:5px;"> <span class="tooltiptext">Filter by KYC</span></div><br>
        <input type=\'hidden\' value=\'0\' name=\'y\'>
        <input type="checkbox" name="y" value="1" onchange="this.form.submit()" <?php if ( ($youtube==\'1\') || ($var_check == 1) ) {echo \'checked\';}?>> <div class="sprite youtube" style="margin-left:2px;"> <span class="tooltiptext">Filter by YouTube</span></div><br>
        <input type=\'hidden\' value=\'0\' name=\'l\'>
        <input type="checkbox" name="l" value="1" onchange="this.form.submit()" <?php if ( ($linkedin==\'1\') || ($var_check == 1) )  {echo \'checked\';}?>><div class="sprite linkedin" style="margin-left:5px;"> <span class="tooltiptext">Flter by LinkedIn</span></div><br>
        <input type=\'hidden\' value=\'0\' name=\'eth\'>
        <input type="checkbox" name="eth" value="1" onchange="this.form.submit()" <?php if ( ($ethereum ==\'1\')  || ($var_check == 1) ) {echo \'checked\';}?>><div class="ethereum" style="margin-left:5px;">ETH<span class="tooltiptext">Filter by Ethereum</span></div><br>
        <input type=\'hidden\' value=\'0\' name=\'neo\'>
        <input type="checkbox" name="neo" value="1" onchange="this.form.submit()" <?php if ( ($neo ==\'1\') || ($var_check == 1) ) {echo \'checked\';}?>><div class="neo" style="margin-left:5px;">NEO<span class="tooltiptext">Filter by NEO</span></div><br>
        <input type=\'hidden\' value=\'0\' name=\'xml\'>
        <input type="checkbox" name="xml" value="1" onchange="this.form.submit()" <?php if ( ($stellar ==\'1\') || ($var_check == 1) ) {echo \'checked\';}?>><div class="stellar" style="margin-left:5px;">XML<span class="tooltiptext">Filter by Stellar</span></div><br>
        <input type=\'hidden\' value=\'0\' name=\'waves\'>
        <input type="checkbox" name="waves" value="1" onchange="this.form.submit()" <?php if ( ($waves ==\'1\') || ($var_check == 1) ) {echo \'checked\';}?>><div class="waves" style="margin-left:5px;">WAVES<span class="tooltiptext">Filter by Waves</span></div><br>
        <input type=\'hidden\' value=\'0\' name=\'kmd\'>
        <input type="checkbox" name="kmd" value="1" onchange="this.form.submit()" <?php if ( ($komodo ==\'1\') || ($var_check == 1) ) {echo \'checked\';}?>><div class="komodo" style="margin-left:5px;">KMD<span class="tooltiptext">Filter by Komodo</span></div><br>
        <input type=\'hidden\' value=\'0\' name=\'own\'>
        <input type="checkbox" name="own" value="1" onchange="this.form.submit()" <?php if ( ($own ==\'1\') || ($var_check == 1) ) {echo \'checked\';}?>><div class="own" style="margin-left:5px;">OWN<span class="tooltiptext">Filter by Own chain</span></div><br>
        <input type="hidden" name="action" value="req">
    </form>
下面是变量的获取：

    if ( isset($_GET[\'f\']) && $_GET[\'f\'] == \'1\') {$face=\'1\';} elseif ( !isset($_GET[\'f\']) ) {$face = \'0\'; }  else {$face=\'facebook\';}
    if ( isset($_GET[\'t\']) && $_GET[\'t\'] == \'1\' ) {$twitter=\'1\';} elseif ( !isset($_GET[\'t\']) ) {$twitter = \'0\'; } else {$twitter=\'twitter\';}
    if ( isset($_GET[\'te\']) && $_GET[\'te\'] == \'1\' ) {$telegram=\'1\';} elseif ( !isset($_GET[\'te\']) ) {$telegram = \'0\'; } else {$telegram=\'telegram\';}
    if ( isset($_GET[\'r\']) && $_GET[\'r\'] == \'1\' ) {$reddit=\'1\';} elseif ( !isset($_GET[\'r\']) ) {$reddit = \'0\'; } else {$reddit=\'reddit\';}
    if ( isset($_GET[\'e\']) && $_GET[\'e\'] == \'1\' ) {$email=\'1\';} elseif ( !isset($_GET[\'e\']) ) {$email = \'0\'; } else {$email=\'email\';}
    if ( isset($_GET[\'ph\']) && $_GET[\'ph\'] == \'1\' ) {$phone=\'1\';} elseif ( !isset($_GET[\'ph\']) ) {$phone = \'0\'; } else {$phone=\'phone\';}
    if ( isset($_GET[\'b\']) && $_GET[\'b\'] == \'1\' ) {$bitcointalk=\'1\';} elseif ( !isset($_GET[\'b\']) ) {$bitcointalk = \'0\'; } else {$bitcointalk=\'bitcointalk\';}
    if ( isset($_GET[\'k\']) && $_GET[\'k\'] == \'1\' ) {$kyc=\'1\';} elseif ( !isset($_GET[\'k\']) ) {$kyc = \'0\'; } else {$kyc=\'kyc\';}
    if ( isset($_GET[\'y\']) && $_GET[\'y\'] == \'1\' ) {$youtube=\'1\';} elseif ( !isset($_GET[\'y\']) ) {$youtube = \'0\'; } else {$youtube=\'youtube\';}
    if ( isset($_GET[\'l\']) && $_GET[\'l\'] == \'1\' ) {$linkedin=\'1\';} elseif ( !isset($_GET[\'l\']) ) {$linkedin = \'0\'; } else {$linkedin=\'linkedin\';}           
    if ( isset($_GET[\'eth\']) && $_GET[\'eth\'] == \'1\' ) {$ethereum=\'1\';} elseif ( !isset($_GET[\'eth\']) ) {$ethereum = \'0\'; } else {$ethereum=\'ethereum\';}
    if ( isset($_GET[\'neo\']) && $_GET[\'neo\'] == \'1\' ) {$neo=\'1\';} elseif ( !isset($_GET[\'neo\']) ) {$neo = \'0\'; } else {$neo=\'neo\';}
    if ( isset($_GET[\'xml\']) && $_GET[\'xml\'] == \'1\' ) {$stellar=\'1\';} elseif ( !isset($_GET[\'xml\']) ) {$stellar = \'0\'; } else {$stellar=\'stellar\';}
    if ( isset($_GET[\'waves\']) && $_GET[\'waves\'] == \'1\' ) {$waves=\'1\';} elseif ( !isset($_GET[\'waves\']) ) {$waves = \'0\'; }  else {$waves=\'waves\';}
    if ( isset($_GET[\'kmd\']) && $_GET[\'kmd\'] == \'1\' ) {$komodo=\'1\';} elseif ( !isset($_GET[\'kmd\']) ) {$komodo = \'0\'; } else {$komodo=\'komodo\';}
    if ( isset($_GET[\'own\']) && $_GET[\'own\'] == \'1\' ) {$own=\'1\';} elseif ( !isset($_GET[\'own\']) ) {$own = \'0\'; } else {$own=\'own\';}
最后是查询：

    $tax_query_args[] = array(                  
     \'relation\' => \'AND\',                   
     array(
        \'taxonomy\' => \'filters\',
        \'field\'    => \'slug\',
        \'terms\'    => array ($face, $twitter, $telegram, $reddit, $email, $phone, $bitcointalk, $kyc, $youtube, $linkedin),
        \'relation\' => \'AND\',
        \'operator\' => \'NOT IN\'
         ),                         
    array(
        \'taxonomy\' => \'platform\',
        \'field\'    => \'slug\',
        \'terms\'    => array ($ethereum, $neo, $stellar, $waves, $komodo, $own),
        \'relation\' => \'AND\',
        \'operator\' => \'NOT IN\'
         ),                     
    );
这是目前的工作，我得到了预期的结果。但如何在同一页面上使用POST方法，以便URL不随参数变化。我想我将不得不使用AJAX，但我对它没有经验。

我将感谢任何帮助或指导。

非常感谢。

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

尝试以下脚本：

但在此之前form\'smethod 应保持为GET. 在form 标记/HTML，删除onchange="this.form.submit()" 从所有checkbox 字段。然后在表单中添加一个标准提交按钮；示例：

<input type="submit" value="Go" />
[编辑]不需要提交按钮我已经更新了脚本，以便在选择过滤器（即“检查”时checkbox), AJAX请求将自动触发。

接下来，确保为帖子/结果分配唯一的IDdiv 或容器。对于本例，ID为my-unique-ID. （此容器必须不包括筛选表单。）

下面是脚本：

<script>
jQuery( function( $ ){
    function ajaxFilter() {
        var $form = $( \'form#filter\' );

        // Disable the submit button and then remove its focus.
        $form.find( \':submit\' ).prop( \'disabled\', true ).blur();

        // Make sure to change my-unique-ID to the correct value.
        $( \'#my-unique-ID\' ).load(
            $form.attr( \'action\' ) + \' #my-unique-ID\',
            $form.serialize(),
            function(){
                // Enable the submit button once AJAX is complete.
                $form.find( \':submit\' ).prop( \'disabled\', false );
            }
        );
    }

    // Run the AJAX request upon submitting the form.
    $( \'form#filter\' ).on( \'submit\', function( e ){
        e.preventDefault();

        ajaxFilter();
    } );

    // Run the AJAX request upon selecting a filter; i.e. "checking" a checkbox.
    $( \':checkbox\', \'form#filter\' ).on( \'change\', function(){
        ajaxFilter();
    } );
} );
</script>
您可以在帖子/结果容器之后或关闭之前添加脚本</body> 标记，或者您认为合适的其他地方（这意味着jQuery必须已经加载）。

希望这会有所帮助，如果您需要进一步的帮助，请告诉我。

结束
标签： custom-taxonomy   query   小码农  

相关推荐

string literals in query

我正在尝试破解mySQL中的一些东西，以允许我从一个插件切换到另一个插件，而无需手动输入woocommerce商店中所有产品的数据。目标是使用meta\\u键更改每个meta\\u值_woofv_video_embed 从这个格式https://youtu.be/JCdljysorMo 此格式a:1:{s:3:\"url\";s:28:\"https://youtu.be/JCdljysorMo\";} 每个产品都有需要更新的不同视频链接。我有：update `wp_postmeta` set `meta