Изменение Bootstrap Popover в зависимости от состояния

Question

Если флажок установлен, должен отображаться текст «Добавить в избранное». Если флажок снят, должен отображаться текст «Удалить из избранного».

Что я пробовал:

Я пытался изменить атрибут содержимого popover, когда флажок установлен. Но это не работает.

Пожалуйста, помогите мне. Заранее спасибо.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.paperindex.com/bootstrap/js/bootstrap.min.js"></script>
<link href="https://cdn.paperindex.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/css/paperindex.min.css" rel="stylesheet"/>
<script src=""></script>
<div class="checkbox">
  <input class="favorites-field desk-top-favorite-field" hidden id="favorites-check" type="checkbox">
  <label style="padding: 0;" data-content="Add to favorites" class="favorites-icon desk-top-favorite-icon ttip-top" for="favorites-check"><i aria-hidden="true" class="fa fa-heart"></i></label>
</div>

$(".desk-top-favorite-icon").popover({
    placement: "top",
    trigger: "manual",
    container: 'body',
    html: true
  })
  .on("mouseenter", function() {
    var _this = this;
    $(this).popover("show");
    $(".popover").on("mouseleave", function() {
      $(_this).popover('hide');
    });
  }).on("mouseleave", function() {
    var _this = this;
    setTimeout(function() {
      if (!$(".popover:hover").length) {
        $(_this).popover("hide");
      }
    }, 300);
  });

// Change the tooltip text based on checked & unchecked condition.
$(".desk-top-favorite-field").on("change", function() {
  if ($(this).is(':checked')) {
    $(this).siblings('.desk-top-favorite-icon').prop('data-content', 'Add to <a href="#" class="link">favorites</a>');
  } else {
    $(this).siblings('.desk-top-favorite-icon').prop('data-content', 'Remove from <a href="#" class="link">favorites</a>');
  }
});

.mrgn-top-50 {
  margin-top: 50px !important;
}

.mrgn-lft-50 {
  margin-left: 50px !important;
}

.favorites-icon i {
  padding: 8px 10px;
  background: #ffcc29;
  border-radius: 2px;
  color: #000;
}

.favorites-field:checked+label i {
  background: #1e6c97;
  color: #ffcc29;
}

<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdn.paperindex.com/bootstrap/js/bootstrap.min.js"></script>
<link href="https://cdn.paperindex.com/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<div class="checkbox mrgn-lft-50 mrgn-top-50">
  <input class="favorites-field desk-top-favorite-field" hidden="" id="favorites-check" type="checkbox">
  <label style="padding: 0;" data-content="Add to <a href='#' class='link'>favorites</a>" class="favorites-icon desk-top-favorite-icon ttip-top" for="favorites-check" data-original-title="" title=""><i aria-hidden="true" class="fa fa-heart"></i></label>
</div>

Answer 1

Наконец, я нашел решение, передав функцию для bootstrap свойства содержимого. В функции я возвращаю текст на основе условий.

$(".desk-top-favorite-icon").popover({
    content: function() {
      return ($(".desk-top-favorite-field").is(':checked')) ? 'Remove from <a href="#">Favorite Suppliers</a> list.' : 'Add to <a href="#">Favorite Suppliers</a> list.'
    },
    placement: "top",
    trigger: "manual",
    container: 'body',
    html: true
  })
  .on("mouseenter", function() {
    var _this = this;
    $(this).popover("show");
    $(".popover").on("mouseleave", function() {
      $(_this).popover('hide');
    });
  }).on("mouseleave", function() {
    var _this = this;
    setTimeout(function() {
      if (!$(".popover:hover").length) {
        $(_this).popover("hide");
      }
    }, 300);
  });

// Change the tooltip text based on checked & unchecked condition.
$(".desk-top-favorite-field").on("change", function() {
  $('.desk-top-favorite-icon').popover('hide');
});

.mrgn-top-50 {
  margin-top: 50px !important;
}

.mrgn-lft-50 {
  margin-left: 50px !important;
}

.favorites-icon i {
  padding: 8px 10px;
  background: #ffcc29;
  border-radius: 2px;
  color: #000;
}

.favorites-field:checked+label i {
  background: #1e6c97;
  color: #ffcc29;
}

<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdn.paperindex.com/bootstrap/js/bootstrap.min.js"></script>
<link href="https://cdn.paperindex.com/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<div class="checkbox mrgn-lft-50 mrgn-top-50">
  <input class="favorites-field desk-top-favorite-field" hidden="" id="favorites-check" type="checkbox">
  <label style="padding: 0;" class="favorites-icon desk-top-favorite-icon ttip-top" for="favorites-check" data-original-title="" title=""><i aria-hidden="true" class="fa fa-heart"></i></label>
</div>

Answer 2

Попробуйте использовать attr () вместо prop () :

$(".desk-top-favorite-field").on("change", function() {
  if ($(this).is(':checked')) {
    $(this).siblings('.desk-top-favorite-icon').attr('data-content', 'Add to <a href="#" class="link">favorites</a>');
  } else {
    $(this).siblings('.desk-top-favorite-icon').attr('data-content', 'Remove from <a href="#" class="link">favorites</a>');
  }
});

Вы также, кажется, забыли добавить data-toggle = "popover" к html, который необходим для создания поповера

<div class="checkbox">
  <input class="favorites-field desk-top-favorite-field" hidden id="favorites-check" type="checkbox">
  <label style="padding: 0;" data-toggle="popover" data-content="Add to favorites" class="favorites-icon desk-top-favorite-icon ttip-top" for="favorites-check"><i aria-hidden="true" class="fa fa-heart"></i></label>
</div>

Я не на 100% уверен в вашей цели, но я заметил одну вещь: поповер не будет отображаться, если флажок снят, а ваш код не будет отображать ссылку «Добавить к». Чтобы popover всегда был открыт, попробуйте добавить этот код:

$('.desk-top-favorite-icon')
    .popover('show')
    .off('click');