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 中声明这样的数组。声明一个名为 的变量finish。在MDN 的文章中阅读有关数组的更多信息。
  2. 你有一个错误。在 JavaScript 中，数组索引是从 0 开始的，这意味着第一个索引是 0。您可以通过从更改事件中的单选按钮值中减去一个来解决此问题。

  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 回答