是什么导致这个范围 polyfill 出现这种奇怪的行为？

Question

我正在尝试将 HTML5 范围输入转换为一组单选框。每个单选框对应于原始范围内的一个值。每个单选框旁边都有显示其值的文本。

由于某种原因，应该显示最后一个单选框的值的最后一点文本没有出现。这张图片的最右边应该有一个 10。

Here is a demo.

HTML

<div class='range_container'>
    1<input type="range" name="points" min="1" max="10" value='5'>10
    <div class='range_value_display'>5</div>
</div>

咖啡脚本

($ "input[type='range']").each (i) ->
    initial_value = ($ this).val()
    radio_name = Math.random().toString(36).substr(2, 5)
    start_value = parseInt(($ this).attr('min'))
    end_value = parseInt(($ this).attr('max'))
    for option_number in [start_value..end_value]
        opts = "#{if opts then opts else ''}<input type='radio' name='#{radio_name}' value='#{option_number}'#{if option_number is parseInt(initial_value) then ' checked' else ''}>#{option_number}"
    ($ this).closest('.range_container').replaceWith ($ opts)

JavaScript

($("input[type='range']")).each(function(i) {
    var end_value, initial_value, option_number, opts, radio_name, start_value, _i;
    initial_value = ($(this)).val();
    radio_name = Math.random().toString(36).substr(2, 5);
    start_value = parseInt(($(this)).attr('min'));
    end_value = parseInt(($(this)).attr('max'));
    for (option_number = _i = start_value; start_value <= end_value ? _i <= end_value : _i >= end_value; option_number = start_value <= end_value ? ++_i : --_i) {
        opts = "" + (opts ? opts : '') + "<input type='radio' name='" + radio_name + "' value='" + option_number + "'" + (option_number === parseInt(initial_value) ? ' checked' : '') + ">" + option_number;
    }
    return ($(this)).closest('.range_container').replaceWith($(opts));
});

出了什么问题？

Answer 1

$ opts 部分因缺少外部元素而感到困惑，只是删除了文本的尾随位。在你的 JS 控制台中试试这个：

$("<span/>5");

请注意，生成的 jquery 对象中没有 5。奥托：

$("<div><span/>5</div>");

工作正常。所以你需要将整个东西包裹在某种容器中。

您的方法总体上也有点令人困惑（逐步替换相同的 DOM）。我还发现它很难阅读，因为在输入创建行中塞满了太多东西。这是我要做的：

($ "input[type='range']").each (i) ->
  $this = $ this
  initial_value = parseInt($this.val())
  max = parseInt($this.attr 'max')
  min = parseInt($this.attr 'min')
  radio_name = Math.random().toString(36).substr(2, 5)
  $opts = $ '<span>'

  for option_number in [min..max]        
    input = $('<input>')
      .attr('type', 'radio')
      .attr('name', radio_name)
      .val(option_number)
    $opts
      .append(input)
      .append(option_number)
    input.attr("checked", true) if initial_value is option_number

  $this.closest('.range_container').replaceWith $opts

这对我来说更具可读性。也使“10”出现。