0

jQueryを使用してラジオボタンの選択に基づいてテキストを変更しようとしていますが、機能しないようです。これは現状の私のコードです：

HTML

<input type="radio" name="finish_id" id="1" value="1" checked />
<label for="1" id="veteran"></label>

<input type="radio" name="finish_id" id="2" value="2" />
<label for="2" id="elite"></label>

<input type="radio" name="finish_id" id="3" value="3" />
<label for="3" id="legendary"></label>

<span id="finish_name"></span>

JS

// Set variables
    var finish[] = "something";
    var finish[] = "something else";
    var finish[] = "another thing";

// Change finish name based on radio selection
    $(document).ready(function() {
        $("input[name='finish_id']").change(function() {
            $('#finish_name').text( finish[$(this).val()] );
        }).change();
    });

配列番号がかなり離れている$(this).val()ので、そのように選択できるかどうかはわかりませんが、設定しても$('#finish_name').text( finish[1] );エラーが発生しunexpected token [ます。.text（）の配列値を使用するにはどうすればよいですか？

4

2 に答える 2

3

それはあなたがjavascriptで配列を宣言する方法ではありません

試す

var finish = ["something",
              "something else",
              "another thing"];   


// Change finish name based on radio selection
$(document).ready(function() {
    $("input[name='finish_id']").change(function() {
        $('#finish_name').text( finish[$(this).val()] );
    }).change();
});

または、よりスケーラブルにするために/html5-esque...。

<input type="radio" name="finish_id" value="1" data-message='something' onchange="javasript:$('#finish_name').text( finish[$(this).val()] )">
<input type="radio" name="finish_id" value="2" data-message='something else' onchange="javasript:$('#finish_name').text( finish[$(this).val()] )">
<input type="radio" name="finish_id" value="3" data-message='another thing' onchange="javasript:$('#finish_name').text( finish[$(this).val()] )">
<span id="finish_name"></span>

http://jsfiddle.net/erPQA/3/

于 2013-02-26T18:30:11.633 に答える
1

あなたにはいくつかの問題があります：

  1. JavaScriptでそのような配列を宣言することはありません。。という名前の1つの変数を宣言しますfinish。アレイの詳細については、MDNの記事をご覧ください。
  2. オフバイワンエラーがあります。JavaScriptでは、配列インデックスは0ベースです。つまり、最初のインデックスは0です。これを修正するには、変更イベント内のラジオボタンの値から1を減算します。

  3. 変更イベントを手動でトリガーする方法により、最後のラジオボタンに対してイベントが発生します。このメソッドを使用して、最初のラジオボタンを選択し、その要素でのみ.first変更イベントをトリガーできます。

    更新：さらに良いことに、チェックされたラジオボタン（以下で更新）.filterでのみ変更を使用して呼び出すことができます

// Set variables
var finish = ['something', 'something else', 'another thing'];

// Change finish name based on radio selection
$(document).ready(function () {
    $("input[name='finish_id']").change(function () {
        $('#finish_name').text(finish[$(this).val()-1]);
    }).filter(":checked").change();
});

例： http： //jsfiddle.net/YnBa3/1/

于 2013-02-26T18:32:45.607 に答える