我有一个元素列表,可以使用在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)现在,单击“按价格排序”或“按PAX排序”,然后尝试再次将鼠标悬停在较小的数字上。您会注意到该工具提示不再起作用。

如果刷新页面或在Js Fiddle中按RUN,则工具提示将起作用,直到您再次对其进行排序。

为什么是这样?

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

最佳答案

当HTML被覆盖时,工具提示插件会丢失元素也就不足为奇了。

代替这个:

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


… 做这个:

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


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

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

另外,您可以简化此操作:

priceAscending = priceAscending ? false : true;


…对此:

priceAscending = !priceAscending;


Updated Fiddle

10-05 20:50
查看更多