WordPress Dynamiccally

Question

我在JSFIDDLE找到了产品过滤代码。现在我想动态地制作它。

我使用WordPress ACF插件创建自定义字段。对于动态，我使用了data-bath和data-bed属性。但是我没有在jquery中实现这个代码。我怎么能这样做？

<?php 
                $posts = get_field('fetured_post');
                if( $posts ): ?>
                <ul id="products">
                    <?php foreach( $posts as $post): // variable must be called $post (IMPORTANT) ?>
                        <?php setup_postdata($post); ?>
                        <?php if( get_field('floor_map_image') ): ?>
                            <li class="product" data-price="<?php the_field('floor_map_price'); ?>" data-bath="<?php the_field('floormap_bathrooms');?>" data-bed="<?php the_field('floormap_bedrooms'); ?>" ><?php the_title(); ?> <?php the_field('floormap_bathrooms');?></li>
                        <?php endif; ?>
                    <?php endforeach; ?>
                    </ul>
                    <?php wp_reset_postdata();  ?>
                    <?php 
                endif; ?>   

                    <div style="clear:both;"></div>
                    <div class="filter">
                      <form id= "brandfilter" action="">
                        <h2>Bath</h2>
                        <input type="radio" name="bath" value="1"/>1 bath</br>
                        <input type="radio" name="bath" value="2"/>2 bath</br>
                        <input type="radio" name="bath" value="3"/>3 bath </br>    
                        <input type="radio" name="bath" value="4"/>4 bath</br>
                      </form>

                      <h2>Bed:</h2>
                      <form id="teamfilter" action="">
                        <input type="radio" name="bed" value="1"/>1 Bed </br>
                        <input type="radio" name="bed" value="2"/>2 Bed </br>
                        <input type="radio" name="bed" value="3"/>3 Bed </br>
                        <input type="radio" name="bed" value="4"/>4 Bed </br>
                      </form>
                    </div>
                </div>

脚本

<script>
                    (function($) {

                        var $filters = $("input:radio[name='bath'],input:radio[name=bed]").prop('checked', false); // start all checked
                        var $categoryContent = $('#CategoryContent li');
                        $filters.click(function() {
                            // if any of the checkboxes for brand or team are checked, you want to show LIs containing their value, and you want to hide all the rest.
                            $categoryContent.hide();
                            $filters.filter(':checked').each(function(i, el) {
                                $categoryContent.filter(':contains(' + el.value + ')').show();
                            });
                        });

                        function showProducts(minPrice, maxPrice) {
                            $("#products li").hide().filter(function() {
                                var price = parseInt($(this).data("price"), 10);
                                return price >= minPrice && price <= maxPrice;
                            }).show();
                        }

                        $(function() {
                            var options = {
                                range: true,
                                min: 0,
                                max: 1000,
                                values: [10, 1000],
                                slide: function(event, ui) {
                                    var min = ui.values[0],
                                        max = ui.values[1];

                                    $("#amount").val("$" + min + " - $" + max);
                                    showProducts(min, max);
                                }
                            }, min, max;

                            $("#slider-range").slider(options);

                            min = $("#slider-range").slider("values", 0);
                            max = $("#slider-range").slider("values", 1);

                            $("#amount").val("$" + min + " - $" + max);

                            showProducts(min, max);
                        });
                    })( jQuery );
                </script>