Javascript 使用html的bootstrap 3工具提示不起作用_Javascript_Jquery_Twitter Bootstrap 3

Javascript 使用html的bootstrap 3工具提示不起作用

javascript jquery twitter-bootstrap-3

Javascript 使用html的bootstrap 3工具提示不起作用,javascript,jquery,twitter-bootstrap-3,Javascript,Jquery,Twitter Bootstrap 3,我尝试在我的网站中使用Bootstrap3工具提示，并使用html显示工具提示的内容，但我得到一个错误：无法读取未定义的属性“user” <div class="container"> <a href="#" data-toggle="tooltip" data-idx="0">Hover over me</a> <a href="#" data-toggle="tooltip" data-idx="1">Hover over me<

我尝试在我的网站中使用Bootstrap3工具提示，并使用html显示工具提示的内容，但我得到一个错误：无法读取未定义的属性“user”

<div class="container">
  <a href="#" data-toggle="tooltip" data-idx="0">Hover over me</a>
  <a href="#" data-toggle="tooltip" data-idx="1">Hover over me</a>
  <a href="#" data-toggle="tooltip" data-idx="2">Hover over me</a>
  <a href="#" data-toggle="tooltip" data-idx="3">Hover over me</a>
  <a href="#" data-toggle="tooltip" data-idx="4">Hover over me</a>
</div>

$（文档）.ready（函数（）{
var data=[{'user'：“Amy”}，{'user'：“Betty”}，{'user'：“Cindy”}，{'user'：“Debby”}，{'user'：“Emily”}]；
设置工具提示（数据）；
})
函数设置工具提示（数据）{
对于（变量i=0；i”；
}
});
}
}

这是控制台中的结果：

有人有这个问题吗？谢谢。

您必须更新设置工具提示功能：

函数设置工具提示（数据）{
对于（变量i=0；i”
});
}
}

工作小提琴：

请尝试以下操作：

function setTooltip(data) {
  for (var i = 0; i < data.length; i++) {
    if($('[data-idx="' + i + '"]').length > 0){//Checking the element exists or not
      $('[data-idx="' + i + '"]').tooltip({
        title: "User: " + data[i].user 
      });
    }
  }
}

函数设置工具提示（数据）{
对于（变量i=0；i0）{//检查元素是否存在
$（“[data idx=“”+i+“]”]）。工具提示({
标题：“用户：”+数据[i]。用户
});
}
}
}

工作正常。


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <title>Tooltip Test</title>
</head>
<body>
<div class="container">
  <a href="#" data-toggle="tooltip" data-idx="0">Hover over me</a>
  <a href="#" data-toggle="tooltip" data-idx="1">Hover over me</a>
  <a href="#" data-toggle="tooltip" data-idx="2">Hover over me</a>
  <a href="#" data-toggle="tooltip" data-idx="3">Hover over me</a>
  <a href="#" data-toggle="tooltip" data-idx="4">Hover over me</a>
</div>
</body>
</html>
$(document).ready(function() {
  var data = [{'user': "Amy"}, {'user': "Betty"}, {'user': "Cindy"}, {'user': "Debby"}, {'user': "Emily"}];
  setTooltip(data);
})

function setTooltip(data) {
  for (var i = 0; i < data.length; i++) {
    $('[data-idx="' + i + '"]').tooltip({
      title: "User: " + data[i].user
    });
  }
}

工具提示测试
$（文档）.ready（函数（）{
var data=[{'user'：“Amy”}，{'user'：“Betty”}，{'user'：“Cindy”}，{'user'：“Debby”}，{'user'：“Emily”}]；
设置工具提示（数据）；
})
函数设置工具提示（数据）{
对于（变量i=0；i


请尝试上述解决方案，效果良好。
我在代码中发现的问题是，您正在使用函数（）设置工具提示，而数据[I]在该范围内未定义
测试链接：
你对我有什么价值？它是零还是可能超过数组的末尾？我更新代码。如果我使用一个工具提示并对其进行初始化，它可以运行。当我使用for循环初始化它们时，它们不起作用…也许你应该将你的“数据”传递给内部函数，它创建了标题-在该函数中“数据”不可见。我这样做了，IE可以成功运行！非常感谢。@Abbie-这个问题在于jqueryui，我在internetexplorer上测试过它。你可以试试看。我已经更新了答案，请尝试一下。@Abbie我更新了代码，请检查此项或将此条件用于您的代码（如果（$（'[data idx=“'+I+'']”]）。长度>0{）…谢谢。