Question

我正在尝试从标签中调用javascript函数，但由于某些原因我无法使其工作我根本没有得到警报，如果我删除函数调用goToprofile我得到json readin是的，如果他能阅读它，那么功能的位置会影响吗？我的html页面：

<!DOCTYPE html>
<html>
<head>
<script>
function load() {
$.getJSON("jsons/followers.json", function(json) {
followers = json;

for(var k in followers.followers){
  if(k=='Admin')
    {
      for(var j in followers.followers[k]){
        $('#contentFollow').append('<li><a href="#" 
         id="'+followers.followers[k][j]+'" 
        onclick="goToprofile('+followers.followers[k][j]')">' 
        +followers.followers[k][j]+'<br>'+'</a></li>');
         $('#contentFollow').append("<br>___________<br>");
        }
}
 }
   });
  }
  function goToprofile(Theuser)
   {
    alert(Theuser)
   }
<script> 
</head> 
<body onload="load()">
 <ul>
      <li  id="dropdownFollowing" style="position:absolute;left:530px;Top:0;">
        <a   class="dropbtn" ><img src="images/user.png"></a>
        <div class="dropdown-content" id="contentFollow">
        </div>
      </li>
</body>

我的json文件：

{
"followers": {
    "Admin": ["ilan shemon","lian jack","lele robit"]
}
}

没有调用goToprofile函数我得到这个html，但添加函数调用它没有显示任何内容：

Answer 1

查看您正在生成的HTML：

<li><a href="#" id="'ilan shemon" onclick="goToprofile(ilan shemon)">

需要引用JavaScript字符串。

也就是说，通过将字符串混合在一起生成代码是 hard 并且容易出错。不要这样做。而是建立一个DOM。使用DOM方法（或它们的jQuery抽象）来正确地逃避事情。

for (var j in followers.followers[k]) {
    let profile = followers.followers[k][j];
    let $li = $("<li />");
    let $button = $("<button />")  // You aren't linking anywhere. Don't use a link.
        .attr("type", "button")
        .attr("id", profile)
        .on("click", function () { 
            goToProfile(profile);
        })
        .text(profile);
    $li.append($button);
    $('#contentFollow').append($li);
}

注意：HTML中没有<li>和<br>可能是sibbling的地方。如果要在元素之间使用边框，请使用CSS边框。如果要在元素的内容和该元素的边缘之间留出空格，请使用CSS填充。

Answer 2

此文件中存在大量语法错误，每个错误都会破坏您的页面。因为它们很多而且非常小，所以只是向您展示一个比较并讨论主要的比较容易。

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
      var followers = {
        "followers": {
            "Admin": ["ilan shemon","lian jack"]
        }
      }
    </script>
    <script>
      function load() {
       // $.getJSON("jsons/followers.json", function(json) {
          //followers = json;

          for(var k in followers.followers) {
            if(k=='Admin') {
                for(var j in followers.followers[k]){
                  let profile = followers.followers[k][j];
                  let $li = $("<li />");
                  let $button = $("<button />")
                      .attr("type", "button")
                      .attr("id", profile)
                      .on("click", function () { 
                          goToProfile(profile);
                      })
                      .text(profile);
                  $li.append($button);
                  $('#contentFollow').append($li);
                }                
              }
          }
        //});
      } 
      function goToProfile(Theuser) {
          alert(Theuser)
      }
    </script>
  </head> 
  <body onload="load()">
   <ul>
        <li  id="dropdownFollowing" style="position:absolute;left:530px;Top:0;">
          <a   class="dropbtn" ><img src="images/user.png"></a>
          <div class="dropdown-content" id="contentFollow">
          </div>
        </li>
    </ul>  
  </body> 
</html>

＆＃13;

您需要正确关闭所有HTML标记。例如，您需要使用<script>关闭</script>代码。这也是您文件中<html>和<ul>标记的问题。
您需要在某处包含jQuery才能访问其功能。除了标准的javascript函数，如果它们以$
load()函数中html字符串的格式不正确，因为@Quentin指出，所以我在我的代码片段中包含了他的修复。
您正在调用的函数名称中包含拼写错误。由于@ user78403指出onload=loadings()应替换为onload=load()，而function goToprofile(Theuser)应替换为function goToProfile(Theuser)

文件中可能还有其他一些小的语法错误，但这应该会给你一个良好的开端。我建议您下载一个IDE，如果您还没有它可以使用一些有用的工具来识别代码中的语法错误。一个好的开始是Sublime Text。我还建议从一个非常简单的HTML文件开始，然后在知道它运行后依次构建它。以您的文件为例，最好从空<body onload="load()"></body>开始，以及像function load() { alert('hi!'); }这样的简单加载函数

希望这有帮助

从foreach中的标记调用javascript函数

2 个答案: