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

popover API允许一个“ show”参数，可以在popover元素上调用它。

确保您要处理的是数字而不是字符串也可能是一件好事，因此请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>

希望您得到想要的东西。

干杯.. !!

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

3 个答案: