javascript - jQuery UI 选项卡在 Wordpress 4.4 及更高版本中不起作用

Question

在我的 Wordpress 主题中，我有一个使用 jQuery UI 选项卡的主题选项页面。这些选项卡在 4.4 以下的 Wordpress 版本中完美运行。但它们似乎不适用于 4.4 之后的版本

它只是不给出任何错误或任何东西。选项页面中的其他 jQuery 函数(例如 jQuery 颜色选择器、 slider 等)工作正常。只是标签坏了。

在控制台中我收到这条消息

Uncaught Error: jQuery UI Tabs: Mismatching fragment identifier.

它来自 wp-include/js/jQuery 文件夹中的 jQuery.js 文件

这是我的代码...

<div class="ui-tabs">
      <ul class="ui-tabs-nav">

       foreach ( $this->sections as $section_slug => $section )
         echo '<li><a href="#' . $section_slug . '">' . $section . '</a></li>';

      </ul>
</div>

<script type="text/javascript">
    jQuery(document).ready(function(jQuery) {
            var sections = [];';

            foreach ( $this->sections as $section_slug => $section )
                    echo "sections['$section'] = '$section_slug';";

            echo 'var wrapped = jQuery(".wrap h3").wrap("<div class=\"ui-tabs-panel\">");
            wrapped.each(function() {
                    jQuery(this).parent().append(jQuery(this).parent().nextUntil("div.ui-tabs-panel"));
            });
            jQuery(".ui-tabs-panel").each(function(index) {
                    jQuery(this).attr("id", sections[jQuery(this).children("h3").text()]);
                    if (index > 0)
                            jQuery(this).addClass("ui-tabs-hide");
            });
            jQuery(".ui-tabs").tabs({
                    fx: { opacity: "toggle", duration: "fast" }
            });

            jQuery("input[type=text], textarea").each(function() {
                    if (jQuery(this).val() == jQuery(this).attr("placeholder") || jQuery(this).val() == "")
                            jQuery(this).css("color", "#999");
            });

            jQuery("input[type=text], textarea").focus(function() {
                    if (jQuery(this).val() == jQuery(this).attr("placeholder") || jQuery(this).val() == "") {
                            jQuery(this).val("");
                            jQuery(this).css("color", "#000");
                    }
            }).blur(function() {
                    if (jQuery(this).val() == "" || jQuery(this).val() == jQuery(this).attr("placeholder")) {
                            jQuery(this).val(jQuery(this).attr("placeholder"));
                            jQuery(this).css("color", "#999");
                    }
            });

            jQuery(".wrap h3, .wrap table").show();

            // This will make the "warning" checkbox class really stand out when checked.
            // I use it here for the Reset checkbox.
            jQuery(".warning").change(function() {
                    if (jQuery(this).is(":checked"))
                            jQuery(this).parent().css("background", "#c00").css("color", "#fff").css("fontWeight", "bold");
                    else
                            jQuery(this).parent().css("background", "none").css("color", "inherit").css("fontWeight", "normal");
            });

            // Browser compatibility
            if (jQuery.browser.mozilla) 
                     jQuery("form").attr("autocomplete", "off");
    });
</script>

这种奇怪行为的原因是什么？它在我的代码中吗？但它在旧版本的 WP 中运行良好。有什么线索吗？

Answer 1

终于找到了我自己问题的答案......

其实这个错误是因为WP在后端接口(interface)上做了一些核心改动。他们改变了后端标题结构 所以，你的 <h3>标签在 WordPress 4.3 中不再是 <h3>在 4.4 及更高版本中不再存在。

因此，在自定义选项页面中，在 WP 4.3 中，标题呈现为 <h2>标签。而且，这些标题作为 .h2 绑定(bind)到我的 javascript 代码.所以，这就是错误发生的地方。

那个小错误导致整个 JavaScript block 出现故障。所以，jQuery 选项卡不起作用。

您可以使用 inspector 进行探索。请参见下图。

如您所见，Wordpress 4.3 中的标题呈现为 <h3>但在 Wordpress 4.4 中，它们是 <h2>

所以，我所做的只是调整我的 JavaScript 代码以将标题绑定(bind)为 .h2。和 .h3

由此...

jQuery(this).children("h2").text();

喜欢这个...

jQuery(this).children("h2, h3").text();

这对我有用。您的代码可能与我的不同。但是，问题的原因可能是......

希望这对您有所帮助!