Question

我正在尝试创建一个动态导航，使用以下代码将元素添加到标准引导程序导航中：

// Map item to the navigation
function addToNavigation (navigationItem) {

  // Build the navigation item HTML string
  var navigationItemHTML = '<li><a';
  if(navigationItem.dataTarget){ navigationItemHTML += ' data-target="#' + navigationItem.dataTarget + '" data-toggle="collapse"';}
  navigationItemHTML += ' aria-expanded="false" class="pointer">';
  if(navigationItem.icon){ navigationItemHTML += '<span class="glyphicon glyphicon-' + navigationItem.icon + '></span> ';}
  navigationItemHTML += navigationItem.title + '</a></li>';

  // Append the new item to the navigation
  $('#navigation').append(navigationItemHTML);
}

如果我设置断点，“navigationItemHTML”的内容就会出现我想要的内容，但页面上的结果会省略导航项目标题和可选的glyphicon。

为什么会有更好的方法来实现我想在jQuery / JavaScript中实现的目标？

Answer 1

管理得出这是我试图传递给jQuery的字符串的问题，我有更多的运气将每个标记实例化为最后一个元素：

// Map item to the navigation
function addToNavigation (navigationItem) {

  // Build the navigation item HTML string
  var navigationItemHTML = $('<li></li>').html(
                              $('<a></a>').html(
                                $('<span></span>').html(
                                  ' ' + navigationItem.title).prepend(
                                    $('<span><span>').addClass('glyphicon glyphicon-' + navigationItem.icon)))
                                      .attr('data-target', '#' + navigationItem.dataTarget)
                                        .attr('data-toggle', 'collapse').addClass('pointer'));

  // Append the new item to the navigation
  $('#navigation').append(navigationItemHTML);
}

我仍然认为这看起来很乱，但如果有人找到更优雅的解决方案，请告诉我。

追加删除元素内容

1 个答案: