если условие не работает в начальной загрузке - PullRequest
Новая
       8

если условие не работает в начальной загрузке

0 голосов
/ 25 сентября 2018

Мне нужно показать некоторый контент, используя загрузчик 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>

Как сделать так, чтобы он отображал всплывающее окно только в том случае, если значение превышает число?

Ответы [ 3 ]

0 голосов
/ 25 сентября 2018

API popover допускает аргумент '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>
0 голосов
/ 25 сентября 2018 

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>

Я думаю, что вам нужно, как указано выше

0 голосов
/ 25 сентября 2018

Вы выбираете все элементы, в то время как вам нужно было выбрать только 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>

Надеюсь, вы получите то, что хотели.

Ура ... !!

...