javascript - jquery 代码片段中需要一个小的更正。. 连同一个小查询

Question

有这个小提琴没有给我想要的输出

http://jsfiddle.net/8FXFE/1/

jquery代码

$(document).ready(function () {
console.log("parsed");
$("input[name='txtNumber']").change(function () {
    console.log("changed");
    if ($("input[name='txtNumber']:checked").val() == '100') $("#output").text("Changed to 100");
    else if ($("input[name='txtNumber']:checked").val() == '200') $("#output").text("Changed to 200");
    else if ($("input[name='txtNumber']:checked").val() == '500') $("#output").text("Changed to 500");
    else if ($("input[name='txtNumber']:checked").val() == '1000') $("#output").text("Changed to 1000");
    else if ($("input[name='txtNumber']:checked").val() == '10000') $("#output").text("Changed to 10000");
    else($("input[name='txtNumber']:checked").val() == 'other')
    $("#output").text("Changed to Other");
});
});

所需的输出是它应显示单击了哪个单选按钮

我还有一个问题？

1. 这条线是什么意思？？

   console.log("parsed");
   

提前感谢您的回答:)

Answer 1

switch 块可以简化你过于复杂的 if-else块

$(document).ready(function () {
    $("input[name=txtNumber]").change(function () {
        switch($(this).val()) {
            case '100': $("#output").text("Changed to 100"); break;
            case '200': // and so on...
        }
    });
});

Answer 2

你忘记了if，else if只是写了else (condition)

$(document).ready(function () {
console.log("parsed");
$("input[name='txtNumber']").change(function () {
    console.log("changed");
    if ($("input[name='txtNumber']:checked").val() == '100') $("#output").text("Changed to 100");
    else if ($("input[name='txtNumber']:checked").val() == '200') $("#output").text("Changed to 200");
    else if ($("input[name='txtNumber']:checked").val() == '500') $("#output").text("Changed to 500");
    else if ($("input[name='txtNumber']:checked").val() == '1000') $("#output").text("Changed to 1000");
    else if ($("input[name='txtNumber']:checked").val() == '10000') $("#output").text("Changed to 10000");
    else($("input[name='txtNumber']:checked").val() == 'other')
//-----^-----------------//
// Forgot the if here!!! //
///////////////////////////

    $("#output").text("Changed to Other");
});
});

将您的代码更改为：

$(document).ready(function () {
console.log("parsed");
$("input[name='txtNumber']").change(function () {
    console.log("changed");
    if ($("input[name='txtNumber']:checked").val() == '100') $("#output").text("Changed to 100");
    else if ($("input[name='txtNumber']:checked").val() == '200') $("#output").text("Changed to 200");
    else if ($("input[name='txtNumber']:checked").val() == '500') $("#output").text("Changed to 500");
    else if ($("input[name='txtNumber']:checked").val() == '1000') $("#output").text("Changed to 1000");
    else if ($("input[name='txtNumber']:checked").val() == '10000') $("#output").text("Changed to 10000");
    else if ($("input[name='txtNumber']:checked").val() == 'other')
    $("#output").text("Changed to Other");
});
});

它有效！

小提琴：http: //jsfiddle.net/8FXFE/3/

---

什么是console.log：

对于你的问题。console.log()是一个现代浏览器特定的函数，它将括号内的任何内容打印到 JavaScript 控制台。

_{（来源：tmont.com）}

Answer 3

$("input[name='txtNumber']").change(function () {

    $("#output").text("Changed to "+$("input[name='txtNumber']:radio:checked").val());
});

编辑抱歉太快了你必须使用 :checked 确实

编辑 2：执行 console.log(this) 以查看是否可以直接访问该值，而不是访问 dom 来获取它：

我正在猜测

 this.target 

应该包含值

console.log 是在控制台中记录您的对象/字符串/数组，以便调试任何问题

Answer 4

Javascript

$("input[name='txtNumber']").change(function () {
    var $radio = $(this),
        $output = $('#output'),
        value = $radio.val() || $('#customNumber').val();

    if (value)
        $("#output").text("Changed to " + value);
    else
        $("#output").text("Changed to empty value");
});

$("#customNumber").keyup(function() {
    $("#output").text("Changed to " + $(this).val());
});

HTML

<div class="textForm">
    <input type="radio" name="txtNumber" value="100" />100
    <input type="radio" name="txtNumber" value="200" />200
    <input type="radio" name="txtNumber" value="500" />500
    <input type="radio" name="txtNumber" value="1000" />1000
    <input type="radio" name="txtNumber" value="10000" />10000
    <input type="radio" name="txtNumber" value="" />other
    <input type="text" name="customNumber" id="customNumber" />
</div>

<h3>Output:</h3>

<div id="output"></div>

小提琴演示