0

HTML5 範囲入力をラジオ ボックスのグループに変換しようとしています。各ラジオ ボックスは、元の範囲の値に対応します。各ラジオ ボックスの横には、その値を示すテキストがあります。

何らかの理由で、最後のラジオ ボックスの値を表示するはずのテキストの最後のビットが表示されません。この画像の右端に 10 があるはずです。

ここに画像の説明を入力

ここにデモがあります。

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));
});

何がうまくいかないのですか？

4

1 に答える 1

2

パーツは、$ 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」を表示させます。

于 2013-01-23T14:11:57.147 に答える