如果条件不能在bootstrap popover中工作

Question

我需要在几个条件下使用bootstrap popover显示一些内容。

如果属性的值大于定义的数量，则应显示弹出窗口。

但是在这里，在条件满足后，popover开始显示在每个属性中。

 var number = 3; $('a').hover( function() { if($(this).attr("value") > number) { $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); } }); 

  <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> <br> <br><a value = "1" data-toggle="popover" data-trigger="hover" data-content="Some content 1">Hover over me 1</a> <br><a value = "2" data-toggle="popover" data-trigger="hover" data-content="Some content 2">Hover over me 2</a> <br><a value = "4" data-toggle="popover" data-trigger="hover" data-content="Some content 4">Hover over me 4</a> <br><a value = "5" data-toggle="popover" data-trigger="hover" data-content="Some content 5">Hover over me 5</a> <br><a value = "6" data-toggle="popover" data-trigger="hover" data-content="Some content 6">Hover over me 6</a> 

只有当值大于数字时，如何才能显示弹出窗口？

Answer 1

popover api允许可以在popover元素上调用的“show”参数。

它可能也很好，以确保你处理一个数字而不是一个字符串，因此parseInt你要检查的数字。

 var number = 3; $(document).ready(function(){ $('a').hover(function() { if(parseInt($(this).attr("value")) > number) { $(this).popover('show'); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <br><a value="1" data-toggle="popover" data-trigger="hover" data-content="Some content 1">Hover over me 1</a> <br><a value="2" data-toggle="popover" data-trigger="hover" data-content="Some content 2">Hover over me 2</a> <br><a value="4" data-toggle="popover" data-trigger="hover" data-content="Some content 4">Hover over me 4</a> <br><a value="5" data-toggle="popover" data-trigger="hover" data-content="Some content 5">Hover over me 5</a> <br><a value="6" data-toggle="popover" data-trigger="hover" data-content="Some content 6">Hover over me 6</a> 

Answer 2

 var number = 3; $('a').each( function(e) { if (Number($(this).attr("value")) > number) { $(this).popover(); } }); 

 <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> <br> <br><a value="1" data-toggle="popover" data-trigger="hover" data-content="Some content 1">Hover over me 1</a> <br><a value="2" data-toggle="popover" data-trigger="hover" data-content="Some content 2">Hover over me 2</a> <br><a value="4" data-toggle="popover" data-trigger="hover" data-content="Some content 4">Hover over me 4</a> <br><a value="5" data-toggle="popover" data-trigger="hover" data-content="Some content 5">Hover over me 5</a> <br><a value="6" data-toggle="popover" data-trigger="hover" data-content="Some content 6">Hover over me 6</a> 

我想你需要像上面那样

Answer 3

您正在选择所有元素，而您只需要选择this元素。

 var number = 3; $('a').hover( function(e) { e.preventDefault(); if($(this).attr("value") > number) { $(this).popover(); } }); 

 <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> <br> <br><a value = "1" data-toggle="popover" data-trigger="hover" data-content="Some content 1">Hover over me 1</a> <br><a value = "2" data-toggle="popover" data-trigger="hover" data-content="Some content 2">Hover over me 2</a> <br><a value = "4" data-toggle="popover" data-trigger="hover" data-content="Some content 4">Hover over me 4</a> <br><a value = "5" data-toggle="popover" data-trigger="hover" data-content="Some content 5">Hover over me 5</a> <br><a value = "6" data-toggle="popover" data-trigger="hover" data-content="Some content 6">Hover over me 6</a> 

希望你得到想要的东西。

干杯..！！