如何正确替换动态创建元素的文本？附ionRangeSlider示例代码

我看了你的代码，问题出在你直接手动修改.irs-single的DOM内容，但ionRangeSlider插件会在初始化和滑块交互时自动更新这个元素的文本，你的修改会被插件的内部逻辑覆盖掉；而且onStart回调触发时，插件可能还没完全渲染出.irs-single元素，导致你的修改根本没生效。

正确的做法：使用插件自带的formatter配置项 #

ionRangeSlider提供了formatter选项，专门用来自定义滑块显示的文本内容，这是官方推荐的方式，能确保你的自定义文本不会被插件覆盖。

修改你的代码如下：

$(function() { 
  var makeSlider = function(params) { 
    var defaults = { 
      id: 1, 
      amountPurchases: 0, 
      pricePlus: 0, 
      offset: 140, 
      onStart: function(data) { 
        // 这里不需要再调用irsSingleNew了，formatter会处理文本
      } 
    }; 
    var options = $.extend({}, defaults, params); 
    var rangeContainer = $('.range-slider-container-' + options.id); 
    var rangeDiscount = $('.range-discount-' + options.id); 

    // 移除原来的irsSingleNew函数，改用formatter

    rangeDiscount.ionRangeSlider({ 
      type: "single", 
      grid_snap: true, 
      postfix: " $",
      // 添加formatter自定义显示文本
      formatter: function(value) {
        // 返回你想要显示的内容，这里用amountPurchases的值
        return options.amountPurchases + ' $';
      },
      onStart: options.onStart 
    }); 

    rangeContainer.find('.irs').on('change click', '.irs', function() { 
      $(this).append('<span class="irs-price-plus">+' + options.pricePlus + ' $</span>'); 
      var irsSingle = rangeContainer.find('.irs-single'), 
          irsSingleOffset = irsSingle.position(), 
          irsSingleOffsetLeft = irsSingleOffset.left; 

      var irsPricePlus = rangeContainer.find('.irs-price-plus'); 
      irsPricePlus.css({ left: irsSingleOffsetLeft + options.offset + 'px' }); 
    }).trigger('click'); 
  }; 

  var rangeSliderDiscount1 = makeSlider({ id: 1, amountPurchases: 10, pricePlus: 40 }); 
  var rangeSliderDiscount2 = makeSlider({ id: 2, amountPurchases: 20, pricePlus: 120 }); 
  var rangeSliderDiscount3 = makeSlider({ id: 3, amountPurchases: 40, pricePlus: 120 }); 
});

为什么这个方法有效？ #

• formatter是ionRangeSlider提供的回调函数，插件每次需要渲染滑块显示文本时（包括初始化、滑块移动）都会调用它，并用返回的内容更新.irs-single元素。
• 这种方式不会和插件的内部DOM管理冲突，能确保你的自定义文本始终生效。

另外，如果你需要根据滑块的当前值动态调整显示内容，也可以在formatter里使用传入的value参数（比如return value + ' 折扣: ' + options.amountPurchases + '$'），非常灵活。

内容的提问来源于stack exchange，提问作者ivansimonov007