web-dev-qa-db-ja.com

同じページのチェックボックスオンクリックフィルタリング

現在私は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を使用する必要があると思いますが、私はそれに慣れていません。

私はどんな助けまたは指導にも感謝します。

ありがとうございました。

custom-taxonomyquery
1
Ante Medic

このスクリプトを試してください。

しかしその前は、formのmethodはGETのままにしておく必要があります。そしてformマークアップ/ HTMLで、すべてのcheckboxフィールドからonchange="this.form.submit()"を削除します。次に標準の送信ボタンをフォームに追加します。例：

<input type="submit" value="Go" />

[編集] 送信ボタンは必要ありません。フィルタを選択すると（つまりcheckboxを「チェックする」）、AJAXリクエストが自動的に起動されるようにスクリプトを更新しました。

次に、posts/resultのdivまたはcontainerに必ず一意のIDを割り当ててください。この例では、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>

あなたはposts/resultコンテナの後、最後の</body>タグの前、あるいは適当だと思う場所にスクリプトを追加することができます。

それが役立つことを願っています、そしてあなたがさらに援助が必要な場合はちょうど私に知らせてください。

0
Sally CJ