Question

以下是我正在显示的HTML文件的代码：

<html>
<head>
<link rel="stylesheet"
      href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet"
     href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>


<title>CodeConfig</title>
<style>
.btn-primary-spacing 
{
margin-right: 10px;
margin-bottom: 5px !important;
}
body {
  padding: 10px;
}
.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; // remove the gap so it doesn't close
 }
</style>
</head>
<body>
<div class="container">
  <h2>CodeConfig Keys</h2>
  <br>
  <div id="key-buttons">
  </div>
</div>

<script type="text/javascript">
function linkClickFunc(item,key)
{
  console.log("trying");
  console.log(item + key);
}
</script>

<script>
$(document).ready(function(){
    CodeConfigkeys = {"ENV": ["Subhayan", "Mary"], "DB_PARAMS": ["SQL_CONNECTIONS_DB", "SQL_CONNECTIONS_COLLECTION"]};
    var html_str = "";
    $.each( CodeConfigkeys, function( key, value ){
    html_str = html_str + "<div class=\"btn-group dropdown\">";
    html_str = html_str + "<button type=\"button\" class=\"btn btn-primary dropdown-toggle btn-primary-spacing\" data-toggle=\"dropdown\" id=\"" + "CodeConfigMenus" + "\">" + key;
    html_str = html_str + "</span><span class=\"sr-only\">Toggle Dropdown</span></button>";
    html_str = html_str + "<div class=\"dropdown-menu\">";
    submenus = value;
    console.log(submenus);
    value.forEach(function(item, index, array) {
        //html_str = html_str + "<li><a href=\"#\">" + item + "</a></li>";
        html_str = html_str + "<li><a href=\"javascript:linkClickFunc(\"" + item + "\",\"" + key + "\");\">" + item + "</a></li>";
    });
    html_str = html_str + "</div></div>";

    });
    //console.log(html_str);
    $("#key-buttons").html(html_str);

});

然而，当我点击下拉菜单中的任何一个链接时，会出现语法错误，指出意外的输入结束。

我想我错过了一些括号，但我似乎找不到任何东西

有人可以说我出错的地方。

提前致谢。

Answer 1

您没有关闭脚本代码</script> AND 您必须将Jquery添加到您的网站：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

AND 从javascript:删除href：

 html_str = html_str + "<li><a href=\"linkClickFunc(\"" + item + "\",\"" + key + "\");\">" + item + "</a></li>";

这是第一项工作：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet"
      href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet"
     href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>


<title>CodeConfig</title>
<style>
.btn-primary-spacing 
{
margin-right: 10px;
margin-bottom: 5px !important;
}
body {
  padding: 10px;
}
.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; // remove the gap so it doesn't close
 }
</style>
</head>
<body>
<div class="container">
  <h2>CodeConfig Keys</h2>
  <br>
  <div id="key-buttons">
  </div>
</div>

<script type="text/javascript">
function linkClickFunc(item,key)
{
  console.log("trying");
  console.log(item + key);
}

$(document).ready(function(){
    CodeConfigkeys = {"ENV": ["Subhayan", "Mary"], "DB_PARAMS": ["SQL_CONNECTIONS_DB", "SQL_CONNECTIONS_COLLECTION"]};
    var html_str = "";
    $.each( CodeConfigkeys, function( key, value ){
    html_str = html_str + "<div class=\"btn-group dropdown\">";
    html_str = html_str + "<button type=\"button\" class=\"btn btn-primary dropdown-toggle btn-primary-spacing\" data-toggle=\"dropdown\" id=\"" + "CodeConfigMenus" + "\">" + key;
    html_str = html_str + "</span><span class=\"sr-only\">Toggle Dropdown</span></button>";
    html_str = html_str + "<div class=\"dropdown-menu\">";
    submenus = value;
    value.forEach(function(item, index, array) {
        //html_str = html_str + "<li><a href=\"#\">" + item + "</a></li>";
        html_str = html_str + "<li><a href=\"linkClickFunc(\"" + item + "\",\"" + key + "\");\">" + item + "</a></li>";
    });
    html_str = html_str + "</div></div>";

    });
    $("#key-buttons").html(html_str);

});
</script>

Answer 2

从javascript:移除<a href=\"javascript:linkClickFunc(\"" + it，它就可以了。

另外，将<a href=\"javascript:linkClickFunc(\"" + item + "\",\"" + key + "\");\">更改为<a onclick=\"linkClickFunc('" + item + "','" + key + "');\">"

问题是你的href看起来像href="linkClickFunc("item","item")"，你可以看到你会遇到问题太多"

<强>演示

function linkClickFunc(item, key) {
  console.log("trying");
  console.log(item + key);
}

$(document).ready(function() {
  CodeConfigkeys = {
    "ENV": ["Subhayan", "Mary"],
    "DB_PARAMS": ["SQL_CONNECTIONS_DB", "SQL_CONNECTIONS_COLLECTION"]
  };
  var html_str = "";
  $.each(CodeConfigkeys, function(key, value) {
    html_str = html_str + "<div class=\"btn-group dropdown\">";
    html_str = html_str + "<button type=\"button\" class=\"btn btn-primary dropdown-toggle btn-primary-spacing\" data-toggle=\"dropdown\" id=\"" + "CodeConfigMenus" + "\">" + key;
    html_str = html_str + "</span><span class=\"sr-only\">Toggle Dropdown</span></button>";
    html_str = html_str + "<div class=\"dropdown-menu\">";
    submenus = value;
    value.forEach(function(item, index, array) {
      //html_str = html_str + "<li><a href=\"#\">" + item + "</a></li>";
      html_str = html_str + "<li><a onclick=\"linkClickFunc('" + item + "','" + key + "');\">" + item + "</a></li>";
    });
    html_str = html_str + "</div></div>";

  });
  $("#key-buttons").html(html_str);

});

.btn-primary-spacing {
  margin-right: 10px;
  margin-bottom: 5px !important;
}

body {
  padding: 10px;
}

.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0; // remove the gap so it doesn't close
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

<div class="container">
  <h2>CodeConfig Keys</h2>
  <br>
  <div id="key-buttons">
  </div>
</div>

单击下拉菜单中的链接调用javascript函数时输入错误意外结束

2 个答案: