0

我有以下使用 Jquery 过滤的基本选择框。我正在将它单独构建到我正在实现它的站点上。由于某种原因，当我将它包含在我创建的自定义空白 wordpress 模板中时，过滤器功能拒绝运行（我在最后一天进行了验证并且它正在驱动我疯了）。在测试页面上隔离它工作正常。我还实现了 jquery 作为functions.php 的一部分。

这是过滤器功能块：

    <table class="mInput">
        <form method="POST" action="/add.php">
            <tr>
                <td class="mDescription">Product type:</td>

                <td class="mItem"><input id="textbox" type="text" />
                    <div class="custom-select" style="width:40%;">
                        <select id="select" name="type">

                        <option class="1" value="1">1</option>
                        <option class="2" value="2">2</option>
                        <option class="3" value="3">3</option>
                        <option class="4" value="4">4</option>
                        <option class="5" value="5">5</option>

                    </select>
                    </div>
                </td>
            </tr>
    </table>

这是我的functions.php文档：

function some_functions_enqueue () {

wp_enqueue_style('style', get_template_directory_uri() . '/css/style.css', array(), '1.0.0', 'all');
wp_register_script('customjs', get_template_directory_uri() . '/js/functions.js', array('jquery'), '1.0.0' );
// enqueue the script
wp_enqueue_script('customjs');
wp_enqueue_script ( 'jquery');
}

add_action('wp_enqueue_scripts', 'some_functions_enqueue');

为了完整起见，这里是functions.js中的函数供参考：

    jQuery.fn.filterByText = function(textbox, selectSingleMatch) {
        return this.each(function() {
            var select = this;
            var options = [];
            $(select).find('option').each(function() {
                options.push({value: $(this).val(), text: $(this).text()});
            });
            $(select).data('options', options);
            $(textbox).bind('change keyup', function() {
                var options = $(select).empty().data('options');
                var search = $(this).val().trim();
                var regex = new RegExp(search,"gi");

                $.each(options, function(i) {
                    var option = options[i];
                    if(option.text.match(regex) !== null) {
                        $(select).append(
                           $('<option>').text(option.text).val(option.value)
                        );
                    }
                });
                if (selectSingleMatch === true && $(select).children().length === 1) {
                    $(select).children().get(0).selected = true;
                }
            });            
        });
    };

    $(function() {
        $('#select').filterByText($('#textbox'), false);
      $("select option").click(function(){
        alert(1);
      });
    });

页面上的附加脚本：

<script>
    var x, i, j, selElmnt, a, b, c;
    /*look for any elements with the class "custom-select":*/
    x = document.getElementsByClassName("custom-select");
    for (i = 0; i < x.length; i++) {
        selElmnt = x[i].getElementsByTagName("select")[0];
        /*for each element, create a new DIV that will act as the selected item:*/
        a = document.createElement("DIV");
        a.setAttribute("class", "select-selected");
        a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
        x[i].appendChild(a);
        /*for each element, create a new DIV that will contain the option list:*/
        b = document.createElement("DIV");
        b.setAttribute("class", "select-items select-hide");
        for (j = 1; j < selElmnt.length; j++) {
            /*for each option in the original select element,
            create a new DIV that will act as an option item:*/
            c = document.createElement("DIV");
            c.innerHTML = selElmnt.options[j].innerHTML;
            c.addEventListener("click", function(e) {
                /*when an item is clicked, update the original select box,
                and the selected item:*/
                var y, i, k, s, h;
                s = this.parentNode.parentNode.getElementsByTagName("select")[0];
                h = this.parentNode.previousSibling;
                for (i = 0; i < s.length; i++) {
                    if (s.options[i].innerHTML == this.innerHTML) {
                        s.selectedIndex = i;
                        h.innerHTML = this.innerHTML;
                        y = this.parentNode.getElementsByClassName("same-as-selected");
                        for (k = 0; k < y.length; k++) {
                            y[k].removeAttribute("class");
                        }
                        this.setAttribute("class", "same-as-selected");
                        break;
                    }
                }
                h.click();
            });
            b.appendChild(c);
        }
        x[i].appendChild(b);
        a.addEventListener("click", function(e) {
            /*when the select box is clicked, close any other select boxes,
            and open/close the current select box:*/
            e.stopPropagation();
            closeAllSelect(this);
            this.nextSibling.classList.toggle("select-hide");
            this.classList.toggle("select-arrow-active");
        });
    }

    function closeAllSelect(elmnt) {
        /*a function that will close all select boxes in the document,
        except the current select box:*/
        var x, y, i, arrNo = [];
        x = document.getElementsByClassName("select-items");
        y = document.getElementsByClassName("select-selected");
        for (i = 0; i < y.length; i++) {
            if (elmnt == y[i]) {
                arrNo.push(i)
            } else {
                y[i].classList.remove("select-arrow-active");
            }
        }
        for (i = 0; i < x.length; i++) {
            if (arrNo.indexOf(i)) {
                x[i].classList.add("select-hide");
            }
        }
    }
    /*if the user clicks anywhere outside the select box,
    then close all select boxes:*/
    document.addEventListener("click", closeAllSelect);

</script>

考虑到我看这个太久了，我可能只是遗漏了一些简单的东西/丢失了它，但是任何输入都可以。

谢谢！

4

0 回答 0