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 block可以缓解过于复杂的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控制台。

http://jarvis.tmont.com/console-chrome.png

Answer 3

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

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

抱歉太快你必须使用：确实检查

编辑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>

Fiddle demo