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在后台界面做了一些核心改动。他们更改了后端标题结构所以，您的 <h3> WordPress 4.3 中的标签不再是 <h3> 4.4 及更高版本中不再出现。

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

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

您可以与检查员一起探索这个问题。请参见下图。

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

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

从此...

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

喜欢这个...

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

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

希望这有帮助!