Загрузить больше скрипта кнопки: изображение вместо текста

#javascript #php #jquery

#javascript #php #jquery

Вопрос:

Я создавал плагин для своей темы, чтобы заменить стандартную навигацию на простую кнопку «Загрузить больше».

Однако я хотел бы превратить кнопку в изображение 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

?>
  

Ответ №1:

Вы вкладываете в этот вопрос много бесполезной информации. Вам нужно быть более четким и сосредоточиться на реальной проблеме. Вы хотите поместить изображение в кнопку или сделать изображение в качестве кнопки? Вы хотите сделать это в Javascript, jQuery или в коде PHP?

Комментарии:

1. извините, просто хотел быть как можно более полным. Я бы хотел, чтобы изображение действовало как кнопка. При нажатии на него должны загружаться следующие сообщения. И, если возможно, на javascript, поскольку большая часть плагина написана на javascript. Хотя, если это невозможно или слишком сложно, jquery или php подойдут так же хорошо.

2. Если ваш класс изображения — load_more_img , что вам нужно сделать с jQyery, так это: $('.load_more_img').on('click',function(){ mt_ajax_load_posts(); // regarding this is the function you need to call )};

3. изображение plus имеет класс с именем main_img, определенный в quary следующим образом: ‘main_img’ => esc_js(plugins_url( ‘/images/ plus.png’, FILE ) ) load_more_img — это то, что происходит, когда пользователь нажимает на ссылку, отображая загрузочный gif (вращающийся круг) Я добавил предложенный вами код (с изменением load_more_img на main_img ), но я думаю, что мне нужно добавить само изображение в навигацию по страницам между тегами <a>, но пока безуспешно