javascript - 在 php 中插入一个 jQuery 值

Question

我在页面上有一些按钮，我想制作一个包含 WordPress 帖子内容的 div，以便仅在单击相关按钮时显示。

一旦我有这么多按钮和帖子，我想知道这是否是一种获取带有将被 jQuery 单击的按钮 ID 名称的值的方法，因为帖子名称相关一样的，在php上插入，获取内容

我不确定我是否可以做这样的事情:

<div id="btn-group">
<button id="History">History</button>
<button id="Mathematic">Mathematic</button>
<button id="Geography">Geography</button>
<button id="Biology">Biology</button>
</div>

<div id="pages-content">
<?php $page = get_page_by_title( '*something to put the var currentID*' ); echo apply_filters('the_content', $p->post_content);?>
</div>

还有 jQuery

    jQuery(document.body).click(function(evt){
      var clicked = evt.target;
      var currentID = clicked.id;
    })

// show the div only when the button is clicked    
    jQuery(document).on('click', function(e) {
        if ( jQuery(e.target).closest('#btn-group').length ) {
            jQuery('#pages-content').show();
        }
    });

Answer 1

这是可能的，而且方式更酷:)

好的，让我们深入研究代码。

HTML 端:

<div id="btn-group">
    <button id="History" onclick = function() {getData(1)};>History</button>
    <button id="Mathematic" onclick = function() {getData(2)};>Mathematic</button>
    <button id="Geography" onclick=function() {getData(3)};>Geography</button>
    <button id="Biology" onclick = function() {getData(4)};>Biology</button>
</div>

<div id="pages-content">

</div>

现在我们已经为 HTML 内容添加了警报功能，但是我们需要创建这个功能，我的意思是我们需要编写这个功能如何工作的逻辑。

<script>
    function getData(code)
    { 
        var code = code; //we know that each code describes each subject, that's preliminary known for programmer
        var formData = new FormData(); //we create formData object to send data with it to server
            formData.append("SubjectCode", code); //we have sent code value with name "SubjectCode", it's actually like sending data from php via "Submit" button
        var xmlHttp = new XMLHTTPRequest(); //we create XHR Object
            xmlHttp.onreadystatechange = function()
            {
                if(xmlHttp.readyState === 4 && xmlHttp.status === 200)
                { 
                    var responseText = JSON.parse(xmlHttp.responseText);
                    var div = document.querySelector("#pages-content");
                     div.innerHTML = responseText;
                }
            } //here we are monitoring request status
            xmlHttp.open("POST", "Server.php"); //same like method="POST" action="server.php", but you write here and not in html form
            xmlHttp.send(formData); //what are we sending to server.
    }    
</script>

和服务器端(PHP):

<?php
    $subjectCode = $_POST["SubjectCode"];
    //select * WHERE `subjectCode` = our subject
    //and output that data so that ajax function could receive it..
?>

仅此而已，之后您将拥有与内容输出相关的完整异步功能。