简体   繁体   English

如何在javascript中使用wordpress php函数?

[英]how to use wordpress php functions in javascript?

I have a custom page publish.php in template's root directory 我在模板的根目录中有一个自定义页面publish.php

    <?php
     /**
       **
       * Template Name: publish
       *
       * @package WordPress
       * @subpackage Twenty_Fourteen
       * @since Twenty Fourteen 1.0
       */
       ?>
     <link rel="stylesheet" type="text/css" href="../Asset/css/style.css">
     <script src="../Asset/scripts/script.js"></script>
    <?php
    get_header(); ?>
   <div class="col-md-12">
      <div style="background-color: #D3D3D3;height:1px;"></div>
      </div>
    <div id="primary" class="content-area">
    <main id="main" class="site-main  site-main--single" role="main">
    <div class="container-fluid">   

    <div class="col-md-5"></div>

    <div class="col-md-2">
    <div align="center" >
        <select id="typeselect" name="value" onChange="OnChangeSelect()">
            <option value="1">Featured</option><br />
            <option value="2">General</option><br />
        </select>
    </div> 
      </div><!-- type select-->

      <div class="col-md-12">
      <div style="background-color: #D3D3D3;height:1px;margin:5px"></div>
      </div>

    <div id="formbody" class="col-md-12">
      <!-- include php files here -->
    </div>

    <script>OnChangeSelect()</script>
    </div><!-- container -->
    </main> <!-- #main -->
    </div> <!-- #primary -->

<?php //get_sidebar(); ?>
<?php get_footer(); ?>

which links to the following javascript 链接到以下javascript

  var val;
function OnChangeSelect()
 {
   var e=document.getElementById("typeselect");
   val = e.value;   
   if(val==2)
   {
       document.getElementById("formbody").innerHTML ="<?php get_template_part("+"publish_game_nr"+");?>";
   }
  else
    {
       document.getElementById("formbody").innerHTML ="<?php get_template_part("+"publish_game_fe"+");?>";
    }
 }

I want to change the content inside of 我想更改里面的内容

<div id="formbody" class="col-md-12">
   <!-- include php files here -->
</div>

in publish.php based on the option selected in dropdown menu 在publish.php中,基于在下拉菜单中选择的选项

so I created two seprate php files publish_game_nr.php and publish_game_fe.php 所以我创建了两个publish_game_nr.php php文件publish_game_nr.phppublish_game_fe.php

in javascript am trying to change the innerhtml of div to include these PHP files using wordpress javascript我尝试使用wordpressdivinnerhtml更改为包括这些PHP文件

 get_template_part()

but the files are not loaded. 但文件未加载。 when I use the function directly in div tag. 当我直接在div标签中使用该功能时。 then the files are loaded successfully 然后文件被成功加载

what is the correct way to do this ? 正确的方法是什么?

尝试这个:

document.getElementById("formbody").innerHTML ="<?php get_template_part('slug'); ?>";

this was easy 这很容易

so I changed the formbody div to 所以我将formbody div更改为

<div id="formbody" class="col-md-12">
  <div style="display:none" id="featured-div">
   <?php get_template_part("publish_game_fe") ?>
  </div>
  <div style="display:block" id="general-div">
   <?php get_template_part("publish_game_nr") ?>
  </div>
</div>

and used the following javascript code 并使用了以下javascript代码

function OnChangeSelect()
{
    var e=document.getElementById("typeselect");
    var val = e.value;  
          if(val==1){
         document.getElementById("general-div").style.display="block";
         document.getElementById("featured-div").style.display="none";
      }
      else{
         document.getElementById("general-div").style.display="none";
         document.getElementById("featured-div").style.display="block";
      }
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM