Question

我尝试使用jQuery实现网格，就像基于此页面的WordPress主题中的Google图像一样http://old.marcofolio.net/webdesign/browser_size_aware_content_scaling.html

google.load("jquery", "1.3.1");
google.setOnLoadCallback(function()
{
    // Detect browser resize and re-calculate
    $(window).bind("resize", calculateContent);

    // Calculate the content on load
    calculateContent();
});

/**
* Function that calculates on how the content should behave.
**/
function calculateContent( e ) {
    // Show all items in case they were hidden
    $("#content img").show();

    // Since we know the width each image takes (100px + 40px + 40px + 2px + 2px = 184px)
    // We can calculate how many rows are showed
    var imageWidth = 184;
    var contentAreaWidth = $("#content").width();
    var itemsPerRow = Math.floor(contentAreaWidth / imageWidth);

    // Retrieve the total number of images
    var totalNrOfItems = $("#content img").length;

    // Calculate how many full rows can be showed
    var fullRows = Math.floor(totalNrOfItems / itemsPerRow);

    // Calculate how many images fell off
    var itemsToHide = totalNrOfItems - fullRows * itemsPerRow;

    // Hide the images by counting backward (from the last item)
    for(var i = totalNrOfItems; i > totalNrOfItems - itemsToHide; i--) {
        // The "eq()" is zero-based, we'll need to substract one
        var remover = i - 1;
        $("#content img:eq("+remover+")").hide();
    }

    // Set debug information
    debug(itemsPerRow, itemsToHide);
}


/**
* Show debug information
**/
function debug(nritems, hidden) {
    $("#debug").html(
        "<p>Items per row: <strong>"+ nritems +"</strong>. Hidden images: <strong>"+ hidden +"</strong>.</p>"
    );
}

这是一个简单的功能，但我无法运行，因为它给了我许多错误，例如：未捕获的ReferenceError：未定义谷歌在script.js？ver = 20170412：5

如何优化此jQuery代码以避免错误？

Answer 1

未捕获的ReferenceError：未定义谷歌的script.js版本= 20170412：5

这听起来好像忘了在您的网页上加入/ Google Loader's script。如果是这样，只需将其添加到主题的function.php文件中 - 例如：

function wp2407_add_scripts() {
    // Rest of your scripts ...
    wp_enqueue_script( 'google-jsapi', 'https://www.google.com/jsapi' );     
}
add_action( 'wp_enqueue_scripts', 'wp2407_add_scripts' );

WordPress主题所需的jQuery代码优化

1 个答案: