1

我正在使用来自instantsearch.js 的Algolia 的rangeslider，工具提示设置为false。当显示滑块的最大值（滑块右侧的值）（例如：2,000）时，我希望它显示为（例如：2,000+）（带有“+”）。

我尝试使用 jquery 访问/重置值，如下所示：

var $sliderMax = $('#my_slider_identifier .ais-range-slider--value').last();

而且我已经成功地获得了变量的句柄，但是当我尝试从自定义小部件的 render() 函数中重置最大值（因此它会随着每组新结果的到来而更新）相当于$sliderMax.text('2,000' + '+')，没有任何反应 -我假设是因为在我打电话后正在重写 DOM..

如果 rangeSlider 显示最大值（例如：2000），是否有推荐的方法在末尾加上“+”？

编辑： 提供更多背景信息：虽然我的值范围为 0-10,000+，但绝大多数数据都在 0-2000 范围内，因此我截断了我的数据，如果它 > 2000，它会显示作为 2000 年。

此外，顺便说一句，奇怪的是，作为一个黑客，我发现如果我使用 0 毫秒的 setTimeout（是的，这里有 stackoverflows）并重新做一个 JQuery 选择，我可以写入 DOM ：

setTimeout(function(){
    $('#index_price_eur_day_i .ais-range-slider--value').last()
        .text(MAX_PRICE_SLIDER + '+');}, 0);

我很想找到一个更有效的解决方案。

4

1 回答 1

3

我从 Algolia 的 Tim Carry 那里听说，他建议我尝试使用:afterCSS 的伪元素来解决这个问题。

事实上，我添加了这个 CSS，它总是添加一个 + - 不幸的是，即使滑块不是最大值：/

#my_slider_identifier .ais-range-slider--value:last-of-type::after { 
    content: "+";
}

所以它不是一个完美的解决方案，但它可能“足够好”——而且它不像使用 jquery 那样丑陋/低效。如果有人有更好的解决方案，请发布！

于 2016-01-27T18:56:47.570 回答