如何從 ZF590B4FDA2C30BE28DD3C8C3CAF5 中的 php 文件定義 onclick function？

Question

API 的新手，並試圖弄清楚當我單擊按鈕 ia php 文件時如何從 js 文件中定義 function。 js文件正確添加到functions.php文件中。

現在我的 js 文件中的 jQuery 代碼如下所示。

jQuery(document).ready(function($) {

function getsource(id){
    $.ajax({
    url:"https://api.spoonacular.com/recipes/"+id+"/information?apiKey=acc3c7fd3cb74d02b7564eefd51172cd",
    success: function(res) {
    
    document.getElementById("sourceLink").innerHTML=res.sourceUrl
    document.getElementById("sourceLink").href=res.sourceUrl
    }
    });
    }
    
    function getrecipe(q){
    $.ajax({
    url:"https://api.spoonacular.com/recipes/search?apiKey=acc3c7fd3cb74d02b7564eefd51172cd&number=3&query="+q,
    success: function(res) {
    for(var i = 0; i < res.results.length; i++ )
    document.getElementById("output").innerHTML+="<h1>"+res.results[i].title+"</h1><br><img src='"+res.baseUri+res.results[i].image+"' width='400' /><br>Ready in "+res.results[i].readyInMinutes+" minutes"
    getsource(res.results[i].id)
    }
    });
    }

});

它應該聽的 php 文件就是這個。

<?php get_header(); ?>    

<section class="mst-section more-recipes-section">
            <div class="mst-row">
                <div class="row">
                    <div class="mst-column-1">
                        <div class="mst-inner-column">
    
                         
                        <input id="search"><button onclick="getrecipe(document.getElementById('search').value)">Search</button>
                        <div id="output"></div>
                        <a href="" id="sourceLink"></a>
    
                        </div>
                    </div>
                </div>
            </div>
    </section>
    
    <?php get_footer(); ?>

在我的控制台中，我發現 function getrecipe 沒有定義。 如何讓 function 了解我在 onclick 中調用它？

還有一件事。 如果我在 php 文件中執行腳本，它工作正常。 像這樣。

                 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
                <input id="search" ><button onclick="getrecipe(document.getElementById('search').value)">Search</button>
                <div id="output"></div>
                <a href="" id="sourceLink"></a>

                <script>
                      function getsource(id){
    $.ajax({
    url:"https://api.spoonacular.com/recipes/"+id+"/information?apiKey=acc3c7fd3cb74d02b7564eefd51172cd",
    success: function(res) {
    
    document.getElementById("sourceLink").innerHTML=res.sourceUrl
    document.getElementById("sourceLink").href=res.sourceUrl
    }
    });
    }
    
    function getrecipe(q){
    $.ajax({
    url:"https://api.spoonacular.com/recipes/search?apiKey=acc3c7fd3cb74d02b7564eefd51172cd&number=3&query="+q,
    success: function(res) {
    for(var i = 0; i < res.results.length; i++ )
    document.getElementById("output").innerHTML+="<h1>"+res.results[i].title+"</h1><br><img src='"+res.baseUri+res.results[i].image+"' width='400' /><br>Ready in "+res.results[i].readyInMinutes+" minutes"
    getsource(res.results[i].id)
    }
    });
    }

                </script>

感謝幫助！

Answer 1

如果我在 php 文件中執行腳本，它工作正常。

問題不在於您將代碼移動到不同的文件。 問題是您更改了代碼，而您將其更改為的內容不再有效。

在您的工作版本中，函數在全局 scope 中定義。 在您的非工作版本中，它們未在全局 scope 中定義。 它們在document.ready事件的回調 function 中定義。 （為什么要改變？）

將函數移回全局 scope （刪除jQuery(document).ready(/*...*/);操作），代碼將與工作版本相同。

---

Alternatively, if you don't want to have functions in global scope (it's generally considered poor form and can lead to bugs as complexity grows) then you can define them locally within that function scope and then assign the click handler also within that scope.

因此，不要直接在 HTML 中使用onclick屬性（也被認為是糟糕的形式，並且隨着復雜性的增加更難維護），您可以在 JavaScript 中應用點擊處理程序：

document.getElementById('search').addEventListener('click', getRecipe);

在這種情況下，事件 object 將作為參數自動傳遞給getRecipe ，您可以在getRecipe function 中使用它來獲取值。 例如：

function getrecipe(e) {
  var q = e.target.value;

  // the rest of the existing function...
}