Question

对于我的wordpress网站，我已经用更多的加载函数替换了底部的分页导航。

这曾经说过文字＆＃34;加载更多＆＃34;但是我用图像替换了它，或者至少是计划。

jquery只是显示文件的链接，而不是实际显示它。我无法弄明白，那里有谁可以借给我一个人？ index.php中的那篇文章就是我试图解决的问题：

'plus' => esc_js( plugins_url( '/images/plus.png', __FILE__ ) ),

位于此位：

    $max = $wp_query->max_num_pages;
        $paged = ( get_query_var('paged') > 1 ) ? get_query_var('paged') : 1;
    wp_enqueue_script( '-load-more', plugins_url( '/js/loadmore.js', __FILE__ ), array( 'jquery' ), '20131010', true );
    wp_localize_script( '-load-more', '_load_more', array(
        'current_page' => esc_js( $paged ),
        'max_pages' => esc_js( $max ),
        'ajaxurl' => esc_js( admin_url( 'admin-ajax.php' ) ),
        'plus' => esc_js( plugins_url( '/images/plus.png', __FILE__ ) ),
        'loading_img' => esc_js( plugins_url( '/images/ajax-loader.gif', __FILE__ ) )
    ) );
}

在javascript中使用：

if ( next_page <= max_pages ) {
    $( '.paging-navigation' ).html( '<div class="nav-links"><a class="load_more" href="#">' + _load_more.plus + '</a><img class="load_more_img" style="display: none;" src="' + _load_more.loading_img + '" alt="Loading..." /></div>' );
}

该网站位于：www.hellodolly.be

因此，目标是获得图像的链接，这是正确的，实际显示为图像。

Answer 1

对于类display: none;，您有img load_more_img样式。这就是为什么没有显示加载图像（据我所知你想在点击“显示更多”后显示它）。此外，您将_load_more.plus值（图像的路径）呈现为<a></a>标记的内容（不知道为什么需要这个，但这很奇怪）。

毕竟我认为你想在<a></a>路径的背景中使用_load_more.plus元素和带有路径的href来打开更多项目。当项目仍在加载时，您希望显示load_more_img。在这种情况下，您应该对代码进行一些重构。

<强> EDITED ：

这段代码的一些变化。您需要为load_more链接添加单击处理程序，以便动态异步加载新项目。可能是这样的：

 $('.load_more').click(function() {
             $.get('<url_to_get_more_items>').done(function(data) {
                     var html = compileTemplate(data); // use Handlebars or Mustache as templates engine, or just make response from server as ready for use html
                     $('<items_container>).append(html);
                     });
             });

您还需要添加img标记，其中包含<a></a>标记内的所有数据，以显示show_more图片。结果：

if ( next_page <= max_pages ) {
    $( '.paging-navigation' ).html( '<div class="nav-links"><a class="load_more" href="#"><img class="some-awesome-class-name" src="' + _load_more.plus + '" alt="Show more"></a><img class="load_more_img" style="display: none;" src="' + _load_more.loading_img + '" alt="Loading..." /></div>' );
}

Jquery显示链接文本而不是图像

1 个答案: