jquery - jQuery单选按钮不返回正确的值

这是一个菜鸟问题。我已经搜索了单选按钮jquery的内容，并且感到困惑，因为有很多动态单选按钮等等。无论如何，我正在尝试做一个简单的Show / Hide div东西。

但是由于某种原因，无论选择什么，我的代码总是为单选按钮返回相同的“ 3”值。

所以这是我的html：

<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script src="testjq.js"></script>
</head>

<body>
<div id="radios">


    <input type="radio" id="radio1" name="radBut" checked="checked" value="1">
    1
  <br>

    <input type="radio" id="radio2" name="radBut" value="2">
    2
  <br>

    <input type="radio" id="radio3" name="radBut" value="3">
    3<br>

    <span id="VAL">value is = </span>
  <br>

</div>
<div id="story1">
Story 1
</div>
<div id="story2" style="display:none">
Story 2
</div>
<div id="story3" style="display:none">
Story 3
</div>

这是testjq.js中的jQuery / java

$(document).ready(function() {
    var testVar = 1;
        $('input:radio[name=radBut]:checked').val(); {
            var testVar = $(this).val();
        }
        if (testVar = 3){
            $("#story3").show();
            $("#story2").show();
            $("#story1").show();
            }
        else if (testVar = 2){
            $("#story3").hide();
            $("#story2").show();
            $("#story1").show();
            }
        else {
            $("#story3").hide();
            $("#story2").hide();
            $("#story1").show();
        }
        $('#VAL').append(testVar);

});

关于我错了什么建议吗？

最佳答案

连同其他人说的话，我对此做得更好。清洁至少。

首先，我将您的代码放在您检查testVar的地方，并将其放入函数中：

function testWithVar(testVar) {
    //store all the story divs in a variable
    var stories = $('[id^="story"]')
    //hide all the variables and show the variables according to testVar
    stories.hide().filter(':lt(' + testVar + ')').show();
    //append the value
    $('#VAL').html("value is = " + testVar);
}

因此，在ready中，您可以这样称呼它：

$(document).ready(function () {
    testWithVar(1);
});

并且，如果您想每次在单选组中选择一个值时都更改testVar的值，请创建一个change事件，该事件将调用testWithVar中的ready函数：

$(document).ready(function () {
    testWithVar(1);
    $('input:radio[name=radBut]').change(function () {
        testWithVar(this.value);
    });
});

演示：http://jsfiddle.net/CQDyz/

参考文献：

starts with selector
filter method
lesser than selector (lt)

关于jquery - jQuery单选按钮不返回正确的值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17281135/