0

我现在正在使用 wordpress，我正在创建一个带有 3 个 cols 的 SPA。左右两列是静态的，右边是动态的，基于前两列的链接。现在我有解决方案，我在正确的 col 中加载所有特定的位置：绝对和可见性：隐藏。但是如果我在手机上尝试我的网页，它的运行速度会有点慢。我的代码如下所示：

<div class="content"> <!-- open class="content"-->
 <script> //script for URL-Change by clicking on Link   !Start
           function showDetailContent(showid) {                                    
                var id = document.getElementsByClassName('shown');                   
                for (var i=0;i<id.length;i++) {                       
                    id[i].classList.remove('shown');
                };                    
                document.getElementById("right_" + showid).classList.add('shown');
                    };
           Path.map("#/?p=<?php the_id();?>").to(function () {   
                showDetailContent(<?php the_id();?>);
           });
           Path.listen();
       </script> <!--script for URL-Change by clicking on link    !Start-->
 <div class="col"><!-- Start col (left)-->
    <?php while(have_posts()):the_post();?> <!-- Start while (left)-->
            <?php if (in_category('infotext')):?> <!--start if-request for category-->                  
                   <div class="infotext  animated bounceSwitch">  <!--start infotext and animation-->
                       <h1>
                            <a href="#/?p=<?php the_id();?>"> <?php the_title();?> </a> <!-- h1 of col(left)-->
                        </h1>
                        <?php the_content(__(''));?>    <!-- get the post-content in it -->
                         </div>  <!-- close infotext and animation-->
                    <form> <!-- start form login-->
                            <input id="user" class="bg-whitesmoke" type="text" placeholder="Benutzername" />
                            <input id="pass" class="bg-whitesmoke" type="password" placeholder="Passwort" />
                            <input id="submit" class="bg-grey" type="submit" value="Anmelden" />    
                    </form> <!-- end form login-->
                       <?php endif;?>  <!-- end if-request for category-->


<?php endwhile;?> 
      </div>   <!-- end col(left) -->
 <div class="col">   <!-- Start col (mid)-->
    <?php while(have_posts()):the_post();?><!-- Start while (mid)-->
        <?php if (in_category('apps')):?><!-- start if request for category-->                                  
                <div id="products-wrapper" class="products-wrapper round-borders-panel bg-brightgrey"> 
                    <h1>
                        <a href="#/?p=<?php the_id();?>"> <?php the_title();?> </a> <!-- h1 for col(mid-->
                    </h1>
                    <?php the_content(__(''));?>   <!-- get post content-->
                </div> 
        <?php endif;?>     <!-- end if request for category-->                                                                                

<?php endwhile;?> <!-- End while(mid)-->
 </div><!-- End col (mid)-->
<div class="col animated bounceInRight">
    <?php while(have_posts()):the_post();?>
        <div class="content-right">
            <div id="right_<?php the_id();?>" class="right">
                <div id="products-wrapper" class="products-wrapper round-borders-panel  bg-brightgrey">
                    <div id="product-01" class="product-preview"> <!-- start div-->
                        <div id="product-title" class="product-image product-title"><!-- get titel and image-->
                            <img src="./img/products/logos/logo-cloudshare.png" /><!-- get logo-->
                            <h1><?php the_title();?></h1><!-- h1 for col(right)-->
                        </div><!--end product-image-->
                        <?php the_content(__(''));?><!-- get post content-->
                    </div><!-- start product-01-->
                </div><!-- end product-wrapper products-wrapper round-borders-panal bg-bright-grey-->
            </div><!-- end class right-->
        </div><!-- end content-right-->

    <?php endwhile;?><!-- end while(right)-->
</div> <!-- close col(right)-->

--> 那么，是否有机会在单击链接时创建内容并在单击另一个链接时将其删除？或者这真的是最好的解决方案吗？祝你有美好的一天，Yannic :)。

4

1 回答 1

1

use 可以通过 jquery ajax 工具$.ajax使用 ajax 调用

这是完整的文档： http ://api.jquery.com/jQuery.ajax/

创建一个新的 php 文件，如 loader.php，根据带有 id 参数的 get 请求返回右列的数据

您应该编写类似于以下代码片段的代码

$('div .right').click(function(){
     $.ajax({
         type:'GET' // request type 'get' or 'post'
         url:loader.php, // your destination file that request will get sent
         data:{id:2}, // data you pass to your destination its something like loader.php?id=2 in php
         success:function(data){
              this.html(data); // *data*  is your returned value from your php file and now can do anything you want with your returened value
         } 
     });

})
于 2013-09-12T14:42:07.977 回答