如何从 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...
}