4

カスタム分類法を検索するウィジェットを自分の Wordpress サイトに持っています。検索フォームには、他にも 4 つのオプションがあります。最小価格と最大価格、および最小 kw と最大 kw です。特定のオプションまたはその子が選択されていない限り、最小および最大 kw 入力フィールドを非表示にしたいと考えています。私のフォームは、jquery を実装するだけで機能します

私はjqueryを知りませんが、この解決策を見つけました。実装方法がわかりません。

私のフォーム：

<form role="search" method="get" id="equipfilter" action="<?php bloginfo('url'); ?>/">
        <fieldset>
            <?php
                $dropdown_args = array(
                    'taxonomy'          => 'exc_equipment_cat',
                    'name'              => 'exc_equipment_cat',
                    'show_count'        => 1,
                    'orderby'           => 'name',
                    'hierarchical'      => true,
                    'echo'              => 0,
                    'walker'            => new Walker_SlugValueCategoryDropdown
                    );
                /*
                wp_dropdown_categories( $dropdown_args );
                */?>
                <?php
                $select = wp_dropdown_categories($dropdown_args);
                $select = preg_replace("#<select([^>]*)>#", "<select$1 data-select='select1'>", $select);
                echo $select;
                ?>
        </fieldset>
        <fieldset class="hidden" data-select="NOT SURE WHAT TO PUT HERE">
            <legend>Kw Range:</legend>
            <input type="text" name="kw_min" placeholder="min" value><br />
            <input type="text" name="kw_max" placeholder="max" value>
        </fieldset>
        <fieldset>
            <legend>Price Range:</legend>
            <input type="text" name="pr_min" placeholder="from" value><br />
            <input type="text" name="pr_max" placeholder="to" value>
        </fieldset>
        <input type="submit" id="filtersubmit" value="Search" />
    </form>

jquery（テストカテゴリでテストしたときに現在動作している場所に更新されました。今はこれを理解する必要があります<fieldset class="hidden" data-select="NOT SURE WHAT TO PUT HERE">）：

jQuery(function ($){
    $(function(){
        $('.postform').change(function() {
            var selectData = $(this).attr("data-select");
            var selectValue = $(this).val();
             if($("fieldset[data-select='" + selectData + selectValue +"']").css("display") == "none"){
                 $("fieldset[data-select^='" + selectData + "']").hide();
                 $("fieldset[data-select='" + selectData + selectValue +"']").show();
             }
        });
    });
});
4

2 に答える 2

0

jQueryのみを使用してフィールドの使用を非表示にするには（Javascriptが無効になっている場合、非表示のフィールドが表示され、cssで非表示にした場合のようにオプションが失われることはありません）：

<script type="text/Javascript">
        jQuery(function ($){
            $(document).ready(function () {
                    $(".kw").hide();
                });

            $(function(){
                $('.postform').change(function() {
                    var selectData = $(this).attr("data-select");
                    var selectValue = $(this).val();
                    $('.kw').hide();
                     if($("fieldset[data-select='" + selectData + selectValue +"']").css("display") == "none"){
                         $("fieldset[data-select^='" + selectData + "']").hide();
                         $("fieldset[data-select='" + selectData + selectValue +"']").show();
                     }
                });
            });
        });
        </script>
于 2012-11-26T07:27:06.700 に答える
0

別のカテゴリが選択されている場合にフィールドを非表示にするには、コードを次のように変更します。

<script type="text/Javascript">
    jQuery(function ($){
        $(function(){
            $('.postform').change(function() {
                var selectData = $(this).attr("data-select");
                var selectValue = $(this).val();
                $('.hidden').hide();
                 if($("fieldset[data-select='" + selectData + selectValue +"']").css("display") == "none"){
                     $("fieldset[data-select^='" + selectData + "']").hide();
                     $("fieldset[data-select='" + selectData + selectValue +"']").show();
                 }
            });
        });
    });
    </script>

$('.hidden').hide();コードに追加されました。

于 2012-11-23T11:31:43.013 に答える