Question

我发现了一个错误。在渲染HTML之后，jQuery似乎无法改变其弹出窗口的数据位置。

示例时间：

   $('[data-toggle=popover],[rel=popover]').popover();

 <? if (isset($labels) && $labels): ?>
  <div id="<?= $id ?>" class="product-labels leak-image-click">
    <? foreach($labels as $label): ?>
      <a class="product-label cursor-pointer" data-label="<?= $label ?>" tabindex="0" data-toggle="popover"  role="button" data-trigger="focus" <?= $label == "soldout" ? "data-soldout-target='".$soldout."'" : "" ?>>
      </a>
    <? endforeach ?>
  </div>
<? endif ?>

labels.init = function(id) {

  $('#' + id).children(".product-label").each( function() {   
    var labelName = $(this).data("label"),
        placement = meventi.getViewSize() == "xs" ? "right" : "top",
        options = {
          "placement": "top"
        };
    $(this).attr("data-content", labels.descriptions[$(this).data("label")]);

    $(this).addClass("product-label-" + labelName );
    $(this).attr("data-placement", "left");
    $(this).popover(options).popover("show");

    $(this).click(function(e){
      $(e.target).popover("show");
    });
  });
};

然后我在页面加载时使用jQuery来更改数据放置。 append_slot("js")来自Symfony框架。

    <? append_slot("js") ?>

  meventi.labels.init("<?= $id ?>");
<? end_slot() ?>

在查看Chrome开发者工具中的HTML元素时，我可以看到该元素显示为data-placement="top"，但是弹出框仍然显示在左侧，就像它最初设置一样

Answer 1

“doge”找不到课程，你需要“.doge”。

尝试更改

  $("doge").attr("data-placement", "top");

到

  $(".doge").attr("data-placement", "top");

Answer 2

当然，如果您输入错字并且没有附加处理程序，则无法正常工作。

$(document).ready(function(){
  $(".doge").attr("data-placement", "top");
});

Answer 3

您还可以通过jQuery data()方法编辑数据属性：

 $(".doge").data("placement", "top");

Answer 4

知道了！

在声明数据展示位置$('[data-toggle=popover],[rel=popover]').popover();

之后，必须在全球范围内发起包含$(this).attr("data-placement", "left");的所有弹出窗口
在meventi.labels.descriptions[$(this).data("label")]);
之后可以调用更改$('[data-toggle=popover],[rel=popover]').popover();和其他数据等数据内容

jQuery无法改变bootstrap的数据放置

4 个答案: