工具提示在元素排序后停止工作

Tooltip stops working after sorting order of elements

本文关键字：停止工作 排序 元素 工具提示      更新时间：2023-09-26

我有一个元素列表，可以重新排序的价格或pax在升序/降序使用这个javascript，我发现在stackoverflow:

var priceAscending = false;
var ratingAscending = true;
$('.container').on('click','.sortbyprice',function(){
ratingAscending = true;
var sorted = $('.listings').sort(function(a,b){
    return (priceAscending ==
           (convertToNumber($(a).find('span').html()) < 
            convertToNumber($(b).find('span').html()))) ? 1 : -1;
});
priceAscending = priceAscending ? false : true;
$('.results').html(sorted);
})
$('.container').on('click','.sortbypax',function(){ 
priceAscending = true;
var sorted = $('.listings').sort(function(a,b){
    return (ratingAscending ==
           (parseFloat($(a).find('.pax').html()) < 
            parseFloat($(b).find('.pax').html()))) ? 1 : -1;
});
ratingAscending = ratingAscending ? false : true;
$('.results').html(sorted);
});
var convertToNumber = function(value){
 return parseFloat(value.replace('$',''));
}

我不确定上面的代码写得有多好(因为我认为问题就在这里)，但我不是javascript专家，所以我不知道。

然后我还得到了Tooltipster插件，以明显显示工具提示。

现在请看我的小提琴

问题:

1)在点击SORT BY PRICE或SORT BY PAX之前，请将鼠标悬停在价格下方较小的数字上，以查看其工具提示。

2)现在单击SORT BY PRICE或SORT BY PAX，然后再次尝试将鼠标悬停在小数字上。你会注意到工具提示不再工作了。

如果你刷新页面或在Js中按下RUN，那么工具提示将会工作，直到你再次排序它们。

为什么会这样?

在使用Tooltipster插件之前，我实际上是使用MiniTip插件，但是当我遇到上面的问题时(是的，这个插件也发生了完全相同的问题)，我决定使用另一个插件(Tooltipster)，因为我认为可能与MiniTip有某种冲突。似乎问题可能在于排序 javascript代码?

当HTML被覆盖时，工具提示插件丢失元素并不奇怪。

而不是:

$('.results').html(sorted);

白马王子;这样做:

$('.results').append(sorted);

将元素移动到正确的顺序，而不覆盖它们。

不管它的名字是什么，当你用一个已经存在的元素调用append()时，它会被移动而不是被添加。但是当你调用html()时，你覆盖了已经存在的东西。工具提示插件在现有元素上工作，因此当它们被覆盖时，它会丢失它们

也可以简化:

priceAscending = priceAscending ? false : true;

白马王子;: 

priceAscending = !priceAscending;

更新小提琴

相关文章：