javascript - 为什么附加到 Bootstrap 导航栏时有 NaN 而不是变量？

Question

我希望能够动态地将选项卡添加到导航栏，以便用户可以创建内容，然后在导航栏之间单击以查看不同的内容。就目前而言，我有以下内容:

function view_data_frame(this_data_frame, language){
  $("#html_data_frame_tabs").append('<a class="nav-item nav-link active" id="nav-' +  language + '-' + this_data_frame + '" data-toggle="tab" href="#content-' +
    language + '-' + this_data_frame + '" role="tab" aria-controls="nav-preview" aria-selected="true">hi' +
    + this_data_frame + 'ho</a>');
    beep = "bop";
    $("#html_data_frame_tabs").append('<a>hi' +
    + beep.toString() + 'ho</a>');

}
view_data_frame("name","language");

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav>
  <div class="nav nav-tabs" id="html_data_frame_tabs" role="tablist">
    <a class="nav-item nav-link active" id="nav-preview-tab" data-toggle="tab" href="#html_preview" role="tab" aria-controls="nav-preview" aria-selected="true">Preview</a>
  </div>
</nav>

正如您从上面的代码片段中看到的，当我运行函数 view_data_frame 时，它​​成功创建了一个新选项卡，当您检查选项卡属性时，它实际上使用“this_data_frame”和“language”来动态更改属性<一个>。但是，由于某种原因，在标签 html 本身中 this_data_frame 被转换为“NaN”。

我对成功输入部分变量的代码行如何尝试将变量解释为 标记中的数字感到困惑？

我在函数中添加了一个变量“beep”，以表明即使在使用动态字符串将 附加到 div 的更简单的实例中也会出现此问题

Answer 1

我建议使用 jQuery 提供的元素创建来简化您的代码:

function addTab(name, lang) {
	debugger;
  let $a = $('<a>', {
  	class: 'nav-item nav-link',
    role: 'tab',
    href: '#',
    text: name
  });
  $('.nav-tabs').append($a);
}

addTab('name', 'lang');

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div class="nav nav-tabs" id="html_data_frame_tabs" role="tablist">
    <a class="nav-link" href="#">Preview</a>
  </div>
</nav>

使用这种方法将节省您的调试时间，并且更易于阅读和维护。