我有一个元素列表,可以使用在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