javascript - 加载更多按钮脚本: image instead of text

Question

我一直在为我的主题构建一个插件，以将标准导航替换为简单的“加载更多”按钮。

但是我想将按钮更改为加号的 png 图像。 到目前为止，我只能获取脚本显示图像的链接，而不是显示它。

我对此还很陌生，所以我是 javascript 的东西，所以我想知道是否有人可以给我提示？

该插件适用于 loadmore.js 文件和 index.php 文件

loadmore.js:

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

var mt_ajax_load_posts = function() {
    //Begin Ajax
    $.post( _load_more.ajaxurl, { action: 'load_posts', next_page: next_page }, function( response ) {
        next_page = response.next_page;
        max_pages = response.max_pages;

        //Append the HTML
        var html = $.parseHTML( response.html );
        html = $( html ).filter( '.type-post' );
        $( '#content .type-post:last' ).after( html );

        //If the next page exceeds the number of pages available, get rid of the navigation
        if ( next_page > max_pages ) {
            $( '.paging-navigation' ).html( '' );
        }

        //Fade out loading img and fade in loading text
        $( '.load_more_img' ).fadeOut( 'slow', function() {
            $( '.load_more' ).fadeIn( 'slow' );
        } );
    }, 'json' );
};

//Clicking the load more button
$( '.paging-navigation' ).on( 'click', 'a.load_more', function( e ) {
    e.preventDefault();

    $( '.load_more' ).fadeOut( 'slow', function() {
        $( '.load_more_img' ).fadeIn( 'slow', function() {
            mt_ajax_load_posts();
        } );
    } );


} );

index.php 文件

add_action( 'plugins_loaded', '_load_more_textdomain' );
function _load_more_textdomain() {
    load_plugin_textdomain( 'HelloDolly-load-more', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );
}

/* Load More */
add_action( 'wp_enqueue_scripts', '_load_more_scripts' );
function _load_more_scripts() {
    global $wp_query;
    if ( !is_home() ) return;

    //Detect HelloDolly
    $theme = wp_get_theme();
    $template = $theme->get_template();
    if ( 'HelloDolly' != $template ) return;

    $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' ) ),
        'main_img' => esc_js( plugins_url( '/images/plus.png', __FILE__ ) ),
        'loading_img' => esc_js( plugins_url( '/images/ajax-loader.gif', __FILE__ ) )
    ) );
}
/**
 * Ajax for loading more posts
 * 
 * @author Ronald Huereca <ronald@metronet.no> 
 */
 add_action( 'wp_ajax_load_posts', '_ajax_load_posts' );
 add_action( 'wp_ajax_nopriv_load_posts', '_ajax_load_posts' );
 function _ajax_load_posts() {
    $next_page = absint( $_POST[ 'next_page' ] );

    global $wp_query;
    $wp_query = new WP_Query( array(
        'paged' => $next_page,
        'post_status' => 'publish'
    ) );
    ob_start();
    global $post;
    while( $wp_query->have_posts() ) {
        $wp_query->the_post();
        get_template_part( 'content', get_post_format() );
    };
    $html = ob_get_clean();

    $return_array = array(
        'next_page' => $next_page + 1,
        'max_pages' => $wp_query->max_num_pages,
        'html' => $html
    );
    //return
    die( json_encode( $return_array ) );
 } //end _ajax_load_posts

?>

Answer 1

您在这个问题中倾倒了很多无用的信息。 您需要更加清晰并专注于真正的问题。 您想将图像放入按钮中，还是将图像用作按钮？ 您想在 Javascript、jQuery 还是 PHP 代码中执行此操作？