是什么导致这个范围的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>

的CoffeeScript

($ "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。 OTOH：

$("<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”出现。