如果條件不能在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> 

希望你得到想要的東西。

干杯..！！