Question

我正在尝试使用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 [ 1}}错误。如何使用.text（）的数组值？

Answer 1

这不是你如何在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/

Answer 2

你有几个问题：

您没有在JavaScript中声明类似的数组。声明一个名为finish的变量。在MDN's article上阅读有关数组的更多信息。
你有一个错误的错误。在JavaScript中，数组索引是从0开始的，这意味着第一个索引是0.您可以通过从更改事件中的单选按钮值中减去一个来解决此问题。
您手动触发更改事件的方式是导致事件触发最后一个单选按钮。您可以使用.first方法选择第一个单选按钮，并在该元素上触发仅的更改事件。

更新：更好的是，您可以使用.filter并仅在checked单选按钮上调用更改（下方更新）

// 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/

jQuery：使用.text（）显示数组值

2 个答案: