Question

我有一个元素列表，可以使用我在stackoverflow上找到的这个javascript以升序/降序按价格或pax重新排序：

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插件，以显示工具提示。

现在请看我的FIDDLE

问题：

1）在点击按价格分类或按分类排序之前，请将鼠标悬停在价格下方的较小数字上，以查看其工具提示。

2）现在点击 SORT BY PRICE 或 SORT BY PAX ，然后再次尝试将鼠标悬停在小号上。您会注意到工具提示不再起作用。

如果您刷新页面或在Js Fiddle中按RUN，则工具提示将一直有效，直到再次对它们进行排序。

为什么会这样？

在使用Tooltipster插件之前，我实际上使用的是MiniTip插件，但当我遇到上述问题时（是的，这个插件也发生了同样的问题）我决定使用另一个插件（Tooltipster）因为我认为可能与MiniTip存在某种冲突。似乎问题可能在于排序 javascript代码？

Answer 1

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

而不是：

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

......这样做：

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

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

尽管名称如此，但当您使用现有元素调用append()时，它会被移动而不是添加。但是，当您致电html()时，您将覆盖已经存在的内容。工具提示插件适用于现有元素，因此当它们被覆盖时会丢失它们

此外，您可以简化：

priceAscending = priceAscending ? false : true;

......对此：

priceAscending = !priceAscending;

Updated Fiddle

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

1 个答案: