6

私はチュートリアルを読んだり試したりするのに何時間も費やしました。私はうまくいく解決策を見つけることができないようで、それがかなり簡単であることはわかっていますが、AJAXに苦労しています。:(

div のリンクから投稿コンテンツを読み込みたい。以下は私が持っているものです。誰かが JavaScript 側で私を助けてくれませんか? ありがとう！

<ul>
    <?php query_posts('post_type=artwork&posts_per_page=-1'); ?>
    <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
    <li class="mytab">
      <span>
         <h3><?php the_title(); ?></h3>
         <a href="#"><?php the_post_thumbnail('Project'); ?></a>
      </span>
    </li>
    <?php endwhile; endif; wp_reset_query(); ?>
</ul>

<div id="loadAjaxHere"></div>

このコードを div #loadAjaxHere にロードしたい

<div class="myArtwork">
   <h2><?php the_title(); ?></h2>
   <div class="text"><?php the_content(); ?></div>
</div>

お手伝いありがとう！！

4

3 に答える 3

10

わかりました、試行錯誤の長いプロセスの後、これを解決したと思います。

これはうまくいくようですが、これが正しい方法でない場合はお知らせください

Javascript:

jQuery.noConflict();
jQuery(document).ready(function($){
    $.ajaxSetup({cache:false});
    $("a.ajax").click(function(){
        var post_url = $(this).attr("href");
        var post_id = $(this).attr("rel");
        $("#tabs").html('<div class="loading">loading...</div>');
    $("#tabs").load(post_url);
    return false;
    });
});

投稿コンテンツを表示したいページ (「アートワーク」と呼ばれるカスタム投稿タイプを使用しています:

<ul class="container">
  <?php query_posts('post_type=artwork&posts_per_page=-1'); ?>
  <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
  <li class="mytab">
    <h3><?php the_title(); ?></h3>
    <a href="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>" class="ajax"><?php the_post_thumbnail('Project'); ?></a>
  </li>
  <?php endwhile; endif; wp_reset_query(); ?>
</ul>

<!-- LOAD SINGLE POST CONTENT IN #TABS -->
<div id="tabs"></div>

そしてシングルポスト「single-artwork.php」。注: get_header や get_footer などは使用しないでください。

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
  <div class="tabcontent" id="tab-<?php the_ID(); ?>">
    <?php the_content(); ?>
  </div>
<?php endwhile; endif; ?>

ありがとう！

于 2013-03-19T00:24:49.063 に答える
3

追加するだけです。単一の投稿の一部のみをロードしたい場合は、修正できます

$("#tabs").load(post_url);

に

$("#tabs").load(post_url + ".tabcontent" );

div.tabcontent のすべてをロードするだけです

于 2014-04-10T16:49:33.920 に答える
3

Barry の答えは、URL の末尾に css セレクター式を追加することで部分的なページを読み込むことができるという点で正しいです。ただし、次のように URL とセレクターの間にスペースが必要です。

$("#tabs").load(post_url + " .tabcontent" );

それ以外の場合、渡される文字列は に.load()なりますhttp://example.com.tabscontent。しかし、そうあるべきですhttp://example.com .tabscontent。

また、賢明なことに、このメソッドを使用すると、jQuery が<script>タグ内のコードをロードして実行するのを停止します。ただし、.load(post_url);セレクターなしで使用するだけで、<script>タグ内のコードを正常にロードして実行できます。

詳細については、こちらをご覧ください。

于 2015-11-16T23:04:43.777 に答える