javascript - 函数未定义

Question

我对 javascript 很陌生，所以这就是交易:

我正在尝试在我的 WordPress 主题中实现一个阅读位置指示器。因此，我在所有脚本标签附近的页脚后面直接挂了一个 div，因为这个位置栏应该粘在屏幕底部。然后我尝试实现某种 custom.js，它通常应该根据用户向下滚动的距离来改变位置指示器的宽度。但这失败了，我不知道为什么，即使我知道这将是我基于缺乏 JS 经验而犯下的一些重大错误。

控制台每次都会发送“引用错误:xyz 未定义”

这是代码，也可以在 jsfiddle 上检查(虽然它可能有点无用，因为脚本运行在 wordpress 环境中，无法在那里模拟)。

HTML/PHP-Hook 标记:

add_action('wp_footer', 'tg_wp_footer');
function tg_wp_footer() { 
if ( is_singular() ) echo '<div id="reading-position-indicator"></div>';
} 

JS 标记:

if( '"is_singular && reading_indicator"' ){
    var reading_content = $the_post.find( '.entry' );
    if( reading_content.length > 0 ){

        reading_content.imagesLoaded(function() {
            var content_height  = reading_content.height();
                window_height   = $window.height();

            $window.scroll(function() {
                var percent         = 0,
                    content_offset  = reading_content.offset().top;
                    window_offest   = $window.scrollTop();

                if (window_offest > content_offset) {
                    percent = 100 * (window_offest - content_offset) / (content_height - window_height);
                }
                jQuery('#reading-position-indicator').css('width', percent + '%');
            });
        });
    }
}

CSS 标记:

#reading-position-indicator {
display: block;
height: 4px;
position: fixed;
bottom: 0;
left: 0;
background: #FF8500;
width: 0;
z-index: 9999;
max-width: 100%;
}

https://jsfiddle.net/cn49ubr6/1/

该栏应该只出现在博客文章中，因此我尝试使用“is_singular”。如何定义以避免 ReferenceError？ Atm 控制台显示“$the_post”未定义。在此之前，当我尝试在第一行中不使用 '"'"时，出现错误 is_singular is not Defined。

亲切的问候!

Answer 1

乔丹，你是对的。使用所有开发工具(chrome、firebug、firefox nightly)检查对象元素后，我发现 firebug 是查找事件的最佳解决方案。首先，我必须更改声明，因为我将栏从另一个主题迁移到我的主题。所以我的 HTML 标记与其他主题完全不同。之后，我与三个 jQuery 插件进行了斗争，这些插件是使该功能正常工作所必需的，因为它们在 javascript 中使用。最后但并非最不重要的一点是，我必须找到正确的 html 元素来进行计算。它似乎有效，但我会进一步测试。

我只是写，因为我想知道为什么控制台在我写的时候给我一个错误，这是未定义的

if (is_singular ()) { 

而如果我写

if ('is_singular()') {

整个东西都活起来了？

谢谢! :-)