Question

我正在尝试使用infinite scroll实现一个页面并将tooltips添加到某些项目中。无限滚动效果很好，但是工具提示仅出现在首页上，然后再使用滚动添加新项目。这是示例：

https://stage.superbiajuridico.es/news/

将光标放在其上方时，工具提示在黄色小圆圈中。如果您向下滚动，则在接下来的页面中，虽然每次重新加载页面时我都会使用append事件来构建它们，但其余的工具提示都不会构建。

显然，代码非常简单，我不知道自己在做什么错：

$storeManager = \Magento\Framework\App\ObjectManager::getInstance()->get('\Magento\Store\Model\StoreManagerInterface');

if ($storeManager->getStore()->getStoreId() == 1) {
    echo 'Hello';
} else {
    echo 'Thanks';
}

这不起作用。我对JS的经验不足，所以我认为我在做一些明显的错误。

编辑：当尝试进行编码笔时，我意识到该错误在其他地方。工具提示仅出现在第一项中（与无限滚动无关）。这是笔： https://codepen.io/aitormendez/pen/yRGyZW

Answer 1

据我了解，您的new Tooltip(miTootip)使用HtmlElement并替换为工具提示。因此，在您的append.infiniteScroll事件的回调中，您必须添加具有类.tooltip-item的元素，然后创建工具提示。

UPD

您选择了.tooltip-item，并使用Tooltip构造函数和此元素一起为一个项目创建了工具提示。因此，如果您需要此工具提示所需要的所有项目，则必须执行以下操作：

inf.on('append.infiniteScroll', function(event, response, path, items) 
   {
    $('.infinite-scroll-container').append('<div class="tooltip-item"></div>')
    const miTooltip = $('.tooltip-item')
    new Tooltip(miTooltip, {
       // options
    });
});

Answer 2

必须创建带有循环遍历jQuery对象的工具提示。

let myTooltip = $('.tooltip-item');
    myTooltip.each(function(){
      new Tooltip(this, {
      title: "Tooltip",
      trigger: "hover",
    });
})

无限滚动+工具提示+回调

2 个答案: