Question

我是javascript的新手，所以这是交易：

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

Evertime控制台只发送“参考错误：xyz未定义”

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

HTML / PHP-Hook Markup：

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未定义。

亲切的问候！

Answer 1

乔丹，你是对的。在使用所有开发工具（chrome，firebug，firefox nightly）检查对象元素后，我发现firebug是查找事件的最佳解决方案。首先，我必须更改声明，因为我将栏从另一个主题迁移到我的。所以我的HTML标记完全不同于其他主题。在那之后我挣扎着三个jQuery-Plugins，这些都是让事情发挥作用所必需的，因为它们被用在了javascript中。最后但并非最不重要的是，我必须找到正确的html元素进行计算。它似乎有效，但我会进一步测试。

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

if (is_singular ()) {

而如果我写

if ('is_singular()') {

整个事情还活着？

谢谢！： - ）

功能未定义

1 个答案: