Javascript 具有自定义帖子类型的WordPress Ajax

这是我的 您将在左侧看到列表链接。我想做的是，我希望每个链接显示图像和文本，我添加它们。我正在使用高级自定义字段（ACF）插件，现在我将为每个链接添加图像

现在我想做的是，当我点击Focus 19>时，它会在同一页上显示Focus 19图像。当我点击Austin 20>时，它会在同一页面上加载Austin的图像

这是我的页面模板

<?php
/*
Template Name: Home Design
 */

$design_name = get_field ('design_name');
$design_name_2 = get_field ('design_name_2');
$design_name_3 = get_field ('design_name_3');
$design_name_4 = get_field ('design_name_4');
$design_name_5 = get_field ('design_name_5');
$design_name_6 = get_field ('design_name_6');
$design_name_7 = get_field ('design_name_7');
$design_name_8 = get_field ('design_name_8');
$design_name_9 = get_field ('design_name_9');
$design_name_10 = get_field ('design_name_10');
$design_name_11 = get_field ('design_name_11');
$design_name_12 = get_field ('design_name_12');
$design_name_13 = get_field ('design_name_13');
$design_name_14 = get_field ('design_name_14');
$design_name_15 = get_field ('design_name_15');
$design_name_16 = get_field ('design_name_16');
$design_name_17 = get_field ('design_name_17');
$design_name_18 = get_field ('design_name_18');
$design_name_19 = get_field ('design_name_19');
$design_name_20 = get_field ('design_name_20');
$design_name_21 = get_field ('design_name_21');
get_header(); ?>

<section id="homedesign">
  <div class="container">  
  <h1>Home Designs</h1>
<hr style="background:#6d9aa0;">

            <h2>Single Storey Home Design</h2>


    <div class="row">
    <div class="col-md-3 borderright">
        <ul class="homedesign">
       <?php echo "$design_name";?>
          <?php echo "$design_name_2";?>
          <?php echo "$design_name_3";?>
          <?php echo "$design_name_4";?>
          <?php echo "$design_name_5";?>
          <?php echo "$design_name_6";?>
          <?php echo "$design_name_7";?>
          <?php echo "$design_name_8";?>
          <?php echo "$design_name_9";?>
          <?php echo "$design_name_10";?>
           <?php echo "$design_name_11";?>
          <?php echo "$design_name_12";?>
          <?php echo "$design_name_13";?>
          <?php echo "$design_name_14";?>
          <?php echo "$design_name_15";?>
          <?php echo "$design_name_16";?>
          <?php echo "$design_name_17";?>
          <?php echo "$design_name_18";?>
          <?php echo "$design_name_19";?>
          <?php echo "$design_name_20";?>
          <?php echo "$design_name_21";?>

        </ul>
        <h2>Dobule Storey Home Design</h2>
        <ul class="homedesign">


        </ul>
        </div>

    <div class="col-sm-9">
                <p class="homedesign-title">The Amazon 35</p>
                        <div class="col-md-12 white-bg">

                  <div class="col-md-3">
                  <ul id="houselist" class="homedesign2">
                     <li> Total Area <br> 355.16sqm</li>
                     <li> Overall Width <br> 12.83 </li>
                    <li> Optional Alfresco <br> 24.81 sqm </li>
                   </ul>
                  </div>
                  <div class="col-md-9" style="padding:0;">
                    <img src="http://www.abiglittlebiz.com/trevelle/wp-content/uploads/2015/12/carness.jpg" alt="Thumb">
                  </div>
                    </div>

                  <div class="col-md-3">
                        <img src="http://www.abiglittlebiz.com/trevelle/wp-content/uploads/2015/12/img1.jpg" alt="">
                    <div class="col-md-12 turq-bg">text goes here</div>
                            </div>

                            <div class="col-md-3">
                        <img src="http://www.abiglittlebiz.com/trevelle/wp-content/uploads/2015/12/img1.jpg" alt="">
                    <div class="col-md-12 turq-bg">text goes here</div>
                            </div>

                            <div class="col-md-3">
                        <img src="http://www.abiglittlebiz.com/trevelle/wp-content/uploads/2015/12/img1.jpg" alt="">
                    <div class="col-md-12 turq-bg">text goes here</div>
                            </div>

                            <div class="col-md-3">
                        <img src="http://www.abiglittlebiz.com/trevelle/wp-content/uploads/2015/12/img1.jpg" alt="">
                    <div class="col-md-12 turq-bg">text goes here</div>
                            </div>

            </div>
        </div>
    </section>
 <?php get_footer(); ?>

家居设计

单层住宅设计


多层住宅设计


亚马逊35


总面积
355.16平方米
总宽度
12.83
可选露天
24.81平方米

这里有文字
这里有文字
这里有文字
这里有文字

如果没有必要，可以考虑不链接到您的网站，因为它有时被当作垃圾邮件处理。我添加它是为了供参考，这样其他人可以更好地理解我正在尝试做的事情。