如果条件在引导弹出窗口中不起作用

Question

我需要在几种情况下使用引导弹出框显示一些内容。

如果属性的值大于定义的数字，则应显示弹出框。

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

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

弹出框 API 允许在弹出框元素上调用"show"参数。

确保您处理的是数字而不是字符串也可能很好，因此解析要检查的数字。

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>

希望你得到想要的。

干杯。。！！